La oss fokusere på CRUD-operasjoner. Tidligere har vi kun lest data fra serveren og vist det til brukeren. Nå skal vi rette oppmerksomheten mot å opprette, oppdatere og slette data. Alt dette skal vi gjøre for fakturasiden.

Teori

Før vi går inn i implementeringen, la oss se nærmere på begrepet Server Actions i Next.js

Server Actions lar deg kjøre spesialkode direkte på serveren. I stedet for å lage kompliserte måter å endre dataene dine på, kan du bruke disse handlingene.

Hvorfor er Server Actions viktige?

Nettapplikasjoner må være sikre, siden de kan utsettes for ulike typer angrep. Server Actions bidrar betydelig til sikkerheten. De benytter ulike teknikker som spesielle forespørsler, kodede meldinger, strenge kontroller og restriksjoner for å beskytte applikasjonen mot angrep, sikre dataene dine og sørge for at kun autoriserte personer får tilgang.

Hvordan bruker vi skjemaer med Server Actions?

Det er mulig å lage skjemaer som benytter Server Actions. Kort fortalt legger vi inn en spesiell kode i skjemaet for å angi hvilken handling som skal utføres. Denne handlingen mottar automatisk dataene som fylles inn i skjemaet.

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