Factuur aanmaken - Stapsgewijs

1. Formulier maken: Eerst is er een formulier nodig om de gegevens te verzamelen. Hier voert de gebruiker de informatie voor de nieuwe factuur in;
2. Serveractie gebruiken: Maak een speciale actie op de server om de formuliergegevens te verwerken. Wanneer iemand het formulier invult, wordt deze actie geactiveerd;
3. Gegevens uit het formulier halen: Haal binnen de serveractie de informatie uit het formulier. Zie het als het uitpakken van een doos - je wilt weten wat erin zit;
4. Gegevens controleren en voorbereiden: Bekijk de gegevens en controleer of alles correct is. Dit is vergelijkbaar met het controleren of de ingrediënten voor een recept vers en juist zijn. Zodra alles in orde is, maak je het gereed om in de database te plaatsen;
5. Gegevens invoegen: Voeg de gegevens toe aan de database;
6. Cache verversen en terug naar facturenpagina: Werk na het toevoegen van de gegevens de cache bij. Dit zorgt ervoor dat iedereen de meest recente informatie ontvangt. Stuur de gebruiker daarna terug naar de facturenpagina zodat de nieuwe factuur zichtbaar is.

Terug naar het project

1. Een formulier maken

Maak een nieuwe map met de naam 'create' binnen de map app/dashboard/invoices. Maak een nieuw bestand genaamd page.tsx in deze map. Dit bestand fungeert als een nieuwe pagina waarmee gebruikers een factuur kunnen aanmaken.

Kopieer en plak de volgende code in het bestand page.tsx:

De pagina gebruikt een Server Component om gebruikersinformatie te verzamelen en stuurt deze vervolgens naar een kant-en-klare <Form> component. Hier volgt een overzicht van de <Form> component:

• Dropdown voor gebruikers;
• Invoerveld voor het bedrag;
• Keuzerondjes voor de status;
• Verstuurknop om te voltooien.

Als je op de knop "Create Invoice" klikt, word je doorgestuurd naar een formulier waarin je de benodigde informatie moet invullen.

2. Gebruik een Server Action

1. Navigeer naar de map lib;
2. Maak een nieuw bestand aan met de naam actions.ts;
3. Voeg de richtlijn 'use server' toe bovenaan;
   • Waarom 'use server'? - Hiermee kunnen de functies veelzijdig worden ingezet in zowel Client- als Servercomponenten. Het is een handige manier om Server Actions te organiseren, maar ze kunnen indien nodig ook direct in Servercomponenten worden opgenomen.
4. Een Server Action-functie aanmaken.

Importeer vervolgens binnen de <Form>-component createInvoice uit het bestand actions.ts. Voeg een action-attribuut toe aan het <form>-element en roep de createInvoice-actie aan.

3. Gegevens uit het formulier ophalen

Ga terug naar app/lib/actions.ts om de waarden van formData te extraheren met de .get(name)-methode. Zodra deze taak is voltooid, kan het formulier worden ingevuld en kunnen de ingevoerde gegevens in de terminalconsole worden bekeken.

Resultaat:

4. Gegevens controleren en voorbereiden

Voordat de formuliergegevens in de database worden opgeslagen, is het essentieel om te controleren of ze het juiste formaat en de correcte types hebben. In onze cursus gebruiken we een specifiek formaat voor de gegevens van de invoice-tabel.

Om dit proces te vereenvoudigen, zijn er enkele opties voor typevalidatie. In plaats van types handmatig te controleren, kunnen we Zod gebruiken, een TypeScript-first validatiebibliotheek. Dit is een handig hulpmiddel dat de validatietaak vereenvoudigt.

Dit is wat we moeten doen in het bestand actions.ts:

1. Importeer Zod in het bestand actions.ts;
2. Maak een schema met Zod dat overeenkomt met de structuur van het formulierveld. Dit schema fungeert als een set regels om te waarborgen dat de formData correct is voordat deze in de database wordt opgeslagen.

Vervolgens geven we de rawFormData door aan CreateInvoice om de types te valideren.

Converteer het bedrag naar centen en maak een nieuwe datum aan met het formaat "YYYY-MM-DD" met behulp van vanilla JS.

5. Gegevens invoegen

Nu we alle benodigde waarden hebben, kunnen we sql gebruiken om deze naar de database te sturen.

6. Cache verversen en terugkeren naar facturen

Next.js beschikt over een handige functie genaamd de Client-side Router Cache. Deze houdt gedurende een bepaalde periode bij waar gebruikers zich op de site hebben bevonden. Deze cache, gecombineerd met prefetching, zorgt ervoor dat gebruikers snel tussen verschillende pagina's kunnen schakelen zonder de server met te veel verzoeken te belasten.

Dit is wat we willen doen:

1. Omdat we de gegevens op de facturenpagina hebben bijgewerkt, willen we ervoor zorgen dat gebruikers de meest recente informatie zien. Hiervoor wissen we de cache met de functie revalidatePath. Dit zorgt ervoor dat er een nieuw verzoek naar de server wordt gestuurd en de meest actuele gegevens worden opgehaald;
2. Nadat de gegevens zijn bijgewerkt en de cache is gewist, willen we de gebruiker soepel terugleiden naar de facturenpagina. Dit doen we met de functie redirect. Dit is vergelijkbaar met het geven van een routebeschrijving terug naar hun vorige locatie.

In de praktijk