Opprett en faktura – trinn for trinn

1. Lag et skjema: Først trenger vi et skjema for å hente inn detaljene. Her fyller brukeren inn informasjonen for den nye fakturaen;
2. Bruk en server-handling: Opprett en spesiell handling på serveren for å håndtere skjemadataene. Når noen fyller ut skjemaet, blir denne handlingen utløst;
3. Hent data fra skjemaet: Inne i server-handlingen hentes informasjonen ut fra skjemaet. Tenk på det som å pakke ut en eske – du vil se hva som er inni;
4. Kontroller og forbered dataene: Se over dataene og sørg for at alt er korrekt. Det er som å sjekke at ingrediensene til en oppskrift er ferske og riktige. Når alt er i orden, gjør det klart for lagring i databasen;
5. Sett inn data: Legg dataene inn i databasen;
6. Oppdater cache og gå tilbake til fakturasiden: Etter at dataene er lagt til, oppdateres cachen. Det er som å sørge for at alle får den nyeste informasjonen. Send deretter brukeren tilbake til fakturasiden slik at de kan se den nye fakturaen de nettopp har opprettet.

Tilbake til prosjektet

1. Opprett et skjema

Opprett en ny mappe kalt 'create' i katalogen app/dashboard/invoices. Lag en ny fil med navnet page.tsx i denne mappen. Denne filen vil fungere som en ny side hvor brukere kan generere en faktura.

Kopier og lim inn følgende kode i page.tsx-filen:

Siden bruker en Server Component for å hente brukerinformasjon og sender deretter denne til en ferdiglaget <Form>-komponent. Her er en oversikt over <Form>-komponenten:

• Nedtrekksmeny for brukere;
• Inndatafelt for beløp;
• Radioknapper for status;
• Send inn-knapp for å fullføre.

Hvis du klikker på "Create Invoice"-knappen, blir du sendt til et skjema som ber deg fylle ut nødvendig informasjon.

2. Bruk en Server Action

1. Gå til lib-mappen;
2. Opprett en ny fil med navnet actions.ts;
3. Legg til 'use server'-direktivet øverst;
   • Hvorfor 'use server'? - Dette gjør funksjonene fleksible og brukbare i både Client- og Server-komponenter. Det er en praktisk måte å organisere Server Actions på, men vi kan også legge dem direkte inn i Server Components ved behov.
4. Opprettelse av en Server Action-funksjon.

Importer deretter <Form> fra createInvoice-filen i actions.ts-komponenten. Inkluder et action-attributt i <form>-elementet og kall på createInvoice-actionen.

3. Hent data fra skjemaet

Gå tilbake til app/lib/actions.ts for å hente verdiene fra formData ved å bruke .get(name)-metoden. Når denne oppgaven er fullført, kan du fylle ut skjemaet og se gjennom de innsendte dataene i terminalkonsollen.

Resultat:

4. Kontroller og forbered dataene

Før du lagrer skjemadataene i databasen, er det viktig å kontrollere at de har riktig format og riktige typer. I dette kurset har vi brukt et spesifikt format for dataene i invoice-tabellen.

For å gjøre denne prosessen enklere, har vi noen alternativer for typevalidering. I stedet for å sjekke typene manuelt, kan vi bruke Zod, et valideringsbibliotek som er laget for TypeScript. Det er et nyttig verktøy som forenkler valideringsarbeidet.

Dette må vi gjøre i actions.ts-filen:

1. Importere Zod i actions.ts-filen;
2. Lage et skjema med Zod som samsvarer med strukturen til form-objektet. Dette skjemaet fungerer som et sett med regler for å sikre at formData er korrekt før det lagres i databasen.

Deretter sender vi rawFormData til CreateInvoice for å validere typene.

Konverter beløpet til cent og opprett en ny dato med formatet "YYYY-MM-DD" ved bruk av vanlig JavaScript.

5. Sett inn data

Nå som vi har alle nødvendige verdier, kan vi bruke sql for å sende dem til databasen.

6. Oppdater cache og gå tilbake til fakturaer

Next.js har en nyttig funksjon kalt Client-side Router Cache. Den holder oversikt over hvor brukerne har vært på nettstedet i en viss periode. Denne cachen, kombinert med forhåndshenting, sørger for at brukerne kan bytte mellom ulike sider raskt uten å overbelaste serveren med for mange forespørsler.

Her er hva vi ønsker å gjøre:

1. Siden vi har oppdatert dataene på fakturasiden, vil vi sikre at brukerne ser den nyeste informasjonen. For å gjøre dette, tømmer vi cachen ved å bruke funksjonen revalidatePath. Dette sørger for at en ny forespørsel sendes til serveren, slik at de ferskeste dataene hentes inn;
2. Etter å ha oppdatert dataene og tømt cachen, ønsker vi å lede brukeren tilbake til fakturasiden på en smidig måte. Dette oppnår vi ved å bruke funksjonen redirect. Det er som å gi dem veibeskrivelse tilbake dit de var.

I praksis