Skapa en faktura - Steg för steg

1. Skapa ett formulär: Först behövs ett formulär för att samla in uppgifterna. Här fyller användaren i informationen för den nya fakturan;
2. Använd en serveråtgärd: Skapa en särskild åtgärd på servern för att hantera formulärdata. När någon skickar in formuläret aktiveras denna åtgärd;
3. Hämta data från formuläret: Inuti serveråtgärden hämtas informationen från formuläret. Tänk på det som att packa upp en låda – du vill se vad som finns inuti;
4. Kontrollera och förbered data: Granska datan och säkerställ att allt är korrekt. Det är som att kontrollera att ingredienserna till ett recept är färska och riktiga. När allt är i ordning, förbered det för att läggas in i databasen;
5. Infoga data: Lägg in datan i databasen;
6. Uppdatera cache och gå tillbaka till fakturasidan: Efter att datan har lagts till, uppdatera cachen. Det är som att se till att alla får den senaste informationen. Skicka sedan användaren tillbaka till fakturasidan så att den nya fakturan visas.

Tillbaka till projektet

1. Skapa ett formulär

Skapa en ny mapp med namnet ' create ' i katalogen app/dashboard/invoices. Skapa en ny fil som heter page.tsx i denna mapp. Denna fil kommer att fungera som en ny sida där användare kan generera en faktura.

Kopiera och klistra in följande kod i filen page.tsx:

Sidan använder en Server Component för att samla in användarinformation och skickar sedan denna till en färdig <Form>-komponent. Här är en översikt av <Form>-komponenten:

• Rullgardinsmeny för användare;
• Inmatningsfält för belopp;
• Radioknappar för status;
• Skicka-knapp för att slutföra.

Om du klickar på knappen "Create Invoice" bör du dirigeras till ett formulär som uppmanar dig att fylla i nödvändig information.

2. Använd en Server Action

1. Navigera till katalogen lib;
2. Skapa en ny fil med namnet actions.ts;
3. Lägg till direktivet 'use server' högst upp;
   • Varför 'use server'? - Det gör funktionerna mångsidiga och användbara i både Client- och Server-komponenter. Det är ett praktiskt sätt att organisera Server Actions, men vi kan även bädda in dem direkt i Server Components om det behövs.
4. Skapa en Server Action-funktion.

Importera sedan <Form> från filen createInvoice i actions.ts-komponenten. Inkludera ett action-attribut i <form>-elementet och anropa createInvoice-aktionen.

3. Hämta data från formuläret

Gå tillbaka till app/lib/actions.ts för att extrahera värdena från formData med metoden .get(name). När du har slutfört denna uppgift kan du fylla i formuläret och granska de inmatade uppgifterna i terminalkonsolen.

Resultat:

4. Kontrollera och förbered data

Innan formulärdata lagras i databasen är det viktigt att kontrollera att den har rätt format och korrekta typer. I vår kurs har vi använt ett specifikt format för data i invoice-tabellen.

För att förenkla denna process finns det några alternativ för typvalidering. Istället för att manuellt kontrollera typer kan vi använda Zod, ett valideringsbibliotek med TypeScript-fokus. Det är ett användbart verktyg som förenklar valideringsarbetet.

Detta behöver vi göra i filen actions.ts:

1. Importera Zod i filen actions.ts;
2. Skapa ett schema med Zod som matchar strukturen för formulärobjektet. Detta schema fungerar som en uppsättning regler för att säkerställa att formData är korrekt innan det sparas i databasen.

Därefter skickar vi rawFormData till CreateInvoice för att validera typerna.

Konvertera beloppet till cent och skapa ett nytt datum i formatet "YYYY-MM-DD" med hjälp av vanlig JavaScript.

5. Infoga data

Nu när vi har alla nödvändiga värden kan vi använda sql för att skicka dem till databasen.

6. Uppdatera cache och gå tillbaka till fakturor

Next.js har en användbar funktion som kallas Client-side Router Cache. Den håller reda på var användare har varit på webbplatsen under en viss tid. Denna cache, i kombination med förhämtning, säkerställer att användare snabbt kan växla mellan olika sidor utan att överbelasta servern med för många förfrågningar.

Detta är vad vi vill göra:

1. Eftersom vi har uppdaterat data på fakturasidan vill vi säkerställa att användarna ser den senaste informationen. För att göra detta rensar vi cachen med funktionen revalidatePath. Detta säkerställer att en ny förfrågan skickas till servern och hämtar den senaste datan;
2. Efter att ha uppdaterat datan och rensat cachen vill vi smidigt leda användaren tillbaka till fakturasidan. Detta uppnås med funktionen redirect. Det är som att ge dem en vägledning tillbaka till där de var.

I praktiken