Fokus på CRUD-operationer. Tidigare har vi endast läst data från servern och visat den för användaren. Nu skiftar vi fokus till att skapa, uppdatera och ta bort data. Allt detta kommer vi att göra för fakturasidan.

Teori

Innan vi går in på implementationen, låt oss betrakta begreppet Server Actions i Next.js

Server Actions möjliggör att köra särskild kod direkt på servern. Istället för att skapa komplicerade sätt att ändra din data, kan du använda dessa åtgärder.

Varför är Server Actions viktiga?

Webbapplikationer måste vara säkra, eftersom de kan utsättas för olika typer av attacker. Server Actions bidrar mycket till säkerheten. De använder olika tekniker såsom särskilda förfrågningar, kodade meddelanden, strikta kontroller och begränsningar för att skydda din applikation mot attacker, skydda din data och säkerställa att endast behöriga personer får åtkomst.

Hur använder vi formulär med Server Actions?

Det är möjligt att skapa formulär som använder Server Actions. Enkelt uttryckt lägger vi till en speciell kod i formuläret för att ange vilken åtgärd som ska utföras. Denna åtgärd tar automatiskt emot de data vi anger i formuläret.

// Server Component
export default function Page() {
  // Action
  async function create(formData: FormData) {
    'use server';
 
    // Logic to change data...
  }
 
  // Put the action in the `action` attribute
  return <form action={create}>...</form>;
}