Creazione di una Fattura - Passaggi Dettagliati

1. Creare un modulo: Innanzitutto, è necessario un modulo per raccogliere i dettagli. Qui l’utente inserisce le informazioni per la nuova fattura;
2. Utilizzare una Server Action: Creare un’azione specifica sul server per gestire i dati del modulo. Quando qualcuno compila il modulo, questa azione viene attivata;
3. Recuperare i dati dal modulo: All’interno della Server Action, estrarre le informazioni dal modulo. È come aprire una scatola per vedere cosa contiene;
4. Verificare e preparare i dati: Esaminare i dati e assicurarsi che siano corretti. È come controllare che gli ingredienti di una ricetta siano freschi e adeguati. Una volta verificati, prepararli per l’inserimento nel database;
5. Inserire i dati: Inserire i dati nel database;
6. Aggiornare la cache e tornare alla pagina delle fatture: Dopo aver aggiunto i dati, aggiornare la cache. È come assicurarsi che tutti dispongano delle informazioni più recenti. Successivamente, reindirizzare l’utente alla pagina delle fatture affinché possa visualizzare la nuova fattura appena creata.

Torna al progetto

1. Creazione di un modulo

Crea una nuova cartella denominata 'create' all'interno della directory app/dashboard/invoices. Crea un nuovo file chiamato page.tsx in questa cartella. Questo file fungerà da nuova pagina che consente agli utenti di generare una fattura.

Copia e incolla il seguente codice nel file page.tsx:

La pagina utilizza un Server Component per raccogliere le informazioni dell'utente e poi le invia a un componente <Form> già pronto. Ecco una panoramica del componente <Form>:

• Menu a discesa per gli utenti;
• Campo di input per l'importo;
• Pulsanti di opzione per lo stato;
• Pulsante di invio per completare.

Se si fa clic sul pulsante "Create Invoice", si verrà indirizzati a un modulo che richiederà di compilare le informazioni necessarie.

2. Utilizzo di una Server Action

1. Accedere alla directory lib;
2. Creare un nuovo file denominato actions.ts;
3. Aggiungere la direttiva 'use server' all'inizio;
   • Perché 'use server'? - Consente alle funzioni di essere versatili e utilizzabili sia nei componenti Client che Server. È un modo pratico per organizzare le Server Action, ma è anche possibile includerle direttamente nei Server Component se necessario.
4. Creazione di una funzione Server Action.

Successivamente, all'interno del componente <Form>, importare createInvoice dal file actions.ts. Includere un attributo action nell'elemento <form> e richiamare l'azione createInvoice.

3. Ottenere dati dal modulo

Tornare a app/lib/actions.ts per estrarre i valori di formData utilizzando il metodo .get(name). Una volta completata questa operazione, è possibile compilare il modulo e visualizzare i dati inseriti nella console del terminale.

Risultato:

4. Verifica e preparazione dei dati

Prima di memorizzare i dati del modulo nel database, è fondamentale verificare che siano nel formato corretto e abbiano i tipi appropriati. Nel nostro corso, abbiamo utilizzato un formato specifico per i dati della tabella invoice.

Per semplificare questo processo, abbiamo alcune opzioni per la validazione dei tipi. Invece di controllare manualmente i tipi, possiamo utilizzare Zod, una libreria di validazione orientata a TypeScript. È uno strumento utile che semplifica il compito della validazione.

Ecco cosa dobbiamo fare nel file actions.ts:

1. Importare Zod nel file actions.ts;
2. Creare uno schema utilizzando Zod che corrisponda alla struttura dell'oggetto form. Questo schema funge da insieme di regole per garantire che formData sia corretto prima di inserirlo nel database.

Successivamente, passiamo il rawFormData a CreateInvoice per validare i tipi.

Convertire l'importo in centesimi e creare una nuova data con il formato "YYYY-MM-DD" utilizzando JavaScript puro.

5. Inserimento dei dati

Ora che abbiamo tutti i valori necessari, possiamo utilizzare sql per inviarli al database.

6. Aggiornamento della cache e ritorno alle fatture

Next.js dispone di una funzionalità utile chiamata Client-side Router Cache. Questa tiene traccia delle pagine visitate dagli utenti sul sito per un determinato periodo. Questa cache, combinata con il prefetching, garantisce che gli utenti possano passare rapidamente tra diverse pagine senza sovraccaricare il server con troppe richieste.

Ecco cosa vogliamo fare:

1. Poiché abbiamo aggiornato i dati nella pagina delle fatture, vogliamo assicurarci che gli utenti visualizzino le informazioni più recenti. Per farlo, svuotiamo la cache utilizzando la funzione revalidatePath. Questo garantisce che venga inviata una nuova richiesta al server, recuperando i dati più aggiornati;
2. Dopo aver aggiornato i dati e svuotato la cache, vogliamo riportare l'utente alla pagina delle fatture in modo fluido. Otteniamo questo risultato utilizzando la funzione redirect. È come fornire indicazioni per tornare dove si trovava.

In pratica