Opret en faktura - trin for trin

1. Opret en formular: Først skal der bruges en formular til at indsamle oplysningerne. Her indtaster brugeren informationerne til den nye faktura;
2. Brug en serverhandling: Opret en særlig handling på serveren til at håndtere formularens data. Når nogen udfylder formularen, bliver denne handling aktiveret;
3. Hent data fra formularen: Inde i serverhandlingen udtrækkes informationerne fra formularen. Det kan sammenlignes med at pakke en kasse ud – man vil se, hvad der er indeni;
4. Kontroller og forbered data: Gennemgå dataene og sikr, at alt er korrekt. Det svarer til at tjekke, om ingredienserne til en opskrift er friske og rigtige. Når alt er i orden, forberedes dataene til indsættelse i databasen;
5. Indsæt data: Indsæt dataene i databasen;
6. Opdater cache og gå tilbage til fakturasiden: Efter indsættelsen opdateres cachen. Det svarer til at sikre, at alle får de nyeste oplysninger. Send derefter brugeren tilbage til fakturasiden, så den nye faktura kan ses.

Tilbage til projektet

1. Opret en formular

Opret en ny mappe med navnet 'create' i mappen app/dashboard/invoices. Opret en ny fil kaldet page.tsx i denne mappe. Denne fil fungerer som en ny side, hvor brugere kan oprette en faktura.

Kopier og indsæt følgende kode i filen page.tsx:

Siden anvender en Server Component til at indsamle brugeroplysninger og sender dem derefter til en færdiglavet <Form>-komponent. Her er en oversigt over <Form>-komponenten:

• Dropdown-menu til brugere;
• Indtastningsfelt til beløb;
• Radioknapper til status;
• Send-knap til at fuldføre.

Hvis du klikker på "Create Invoice"-knappen, bliver du sendt til en formular, hvor du skal udfylde de nødvendige oplysninger.

2. Brug en Server Action

1. Naviger til lib-mappen;
2. Opret en ny fil med navnet actions.ts;
3. Tilføj direktivet 'use server' øverst;
   • Hvorfor 'use server'? - Det gør funktionerne alsidige og anvendelige i både Client- og Server-komponenter. Det er en praktisk måde at organisere Server Actions på, men de kan også placeres direkte i Server Components om nødvendigt.
4. Oprettelse af en Server Action-funktion.

Importer derefter <Form> fra filen createInvoice i actions.ts-komponenten. Tilføj et action-attribut til <form>-elementet og kald createInvoice-actionen.

3. Hent data fra formularen

Gå tilbage til app/lib/actions.ts for at udtrække værdierne fra formData ved hjælp af .get(name)-metoden. Når denne opgave er fuldført, kan formularen udfyldes, og de indtastede data kan gennemgås i terminalens konsol.

Resultat:

4. Kontrollér og forbered data

Før lagring af formularens data i databasen er det vigtigt at sikre, at de har det korrekte format og de rigtige typer. I dette kursus har vi brugt et specifikt format til data i invoice-tabellen.

For at gøre denne proces nemmere har vi et par muligheder for typevalidering. I stedet for manuelt at kontrollere typerne kan vi bruge Zod, et TypeScript-først valideringsbibliotek. Det er et nyttigt værktøj, der forenkler valideringsopgaven.

Dette skal vi gøre i actions.ts-filen:

1. Importér Zod i actions.ts-filen;
2. Opret et schema med Zod, der matcher strukturen af form-objektet. Dette schema fungerer som et sæt regler, der sikrer, at formData er korrekt, før det gemmes i databasen.

Derefter sendes rawFormData til CreateInvoice for at validere typerne.

Konverter beløbet til cent og opret en ny dato i formatet "YYYY-MM-DD" ved hjælp af almindelig JavaScript.

5. Indsæt data

Nu hvor vi har alle de nødvendige værdier, kan vi bruge sql til at indsende dem til databasen.

6. Opdater cache og gå tilbage til fakturaer

Next.js har en nyttig funktion kaldet Client-side Router Cache. Den holder styr på, hvor brugerne har været på siden i en vis periode. Denne cache, kombineret med prefetching, sikrer, at brugerne hurtigt kan skifte mellem forskellige sider uden at overbelaste serveren med for mange forespørgsler.

Her er, hvad vi ønsker at gøre:

1. Da vi har opdateret dataene på fakturasiden, vil vi sikre, at brugerne ser de nyeste oplysninger. For at gøre dette rydder vi cachen ved hjælp af funktionen revalidatePath. Dette sikrer, at der sendes en frisk forespørgsel til serveren, så de nyeste data hentes;
2. Efter opdatering af dataene og rydning af cachen vil vi lede brugeren tilbage til fakturasiden på en smidig måde. Dette opnås ved at bruge funktionen redirect. Det svarer til at give dem en vejledning tilbage til, hvor de var.

I praksis