Laten we ons richten op CRUD-bewerkingen. Voorheen lazen we alleen gegevens van de server en toonden deze aan de gebruiker. Nu verschuiven we de focus naar het aanmaken, bijwerken en verwijderen van gegevens. Dit doen we allemaal voor de facturenpagina.

Theorie

Voordat we beginnen met de implementatie, bekijken we eerst de term Server Actions in Next.js.

Server Actions stellen je in staat om speciale code direct op de server uit te voeren. In plaats van ingewikkelde methoden te gebruiken om je gegevens te wijzigen, kun je deze acties inzetten.

Waarom zijn Server Actions belangrijk?

Webapplicaties moeten veilig zijn, omdat ze op verschillende manieren aangevallen kunnen worden. Server Actions dragen aanzienlijk bij aan de beveiliging. Ze maken gebruik van diverse technieken zoals speciale verzoeken, gecodeerde berichten, strikte controles en beperkingen om je applicatie te beschermen tegen aanvallen, je gegevens te beveiligen en ervoor te zorgen dat alleen geautoriseerde personen toegang hebben.

Hoe gebruiken we formulieren met Server Actions?

Het is mogelijk om formulieren te maken die gebruikmaken van Server Actions. In eenvoudige bewoordingen voegen we een speciale code toe aan het formulier om aan te geven welke actie uitgevoerd moet worden. Deze actie ontvangt automatisch de gegevens die in het formulier zijn ingevuld.

// 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>;
}