Keskitytään CRUD-toimintoihin. Aiemmin olemme vain lukeneet tietoja palvelimelta ja näyttäneet niitä käyttäjälle. Nyt siirretään painopiste tietojen luomiseen, päivittämiseen ja poistamiseen. Kaikki tämä tehdään laskutussivulla.

Teoria

Ennen kuin siirrytään toteutukseen, tarkastellaan käsitettä Server Actions Next.js:ssä.

Server Actions mahdollistavat erityisen koodin suorittamisen suoraan palvelimella. Sen sijaan, että loisit monimutkaisia tapoja muokata tietojasi, voit käyttää näitä toimintoja.

Miksi Server Actions ovat tärkeitä?

Verkkosovellusten tulee olla turvallisia, sillä niihin voidaan kohdistaa erilaisia hyökkäyksiä. Server Actions parantavat merkittävästi tietoturvaa. Ne hyödyntävät erilaisia tekniikoita, kuten erityisiä pyyntöjä, koodattuja viestejä, tiukkoja tarkistuksia ja rajoituksia, jotta sovelluksesi pysyy suojattuna hyökkäyksiltä, tietosi ovat turvassa ja vain valtuutetut henkilöt pääsevät niihin käsiksi.

Miten lomakkeita käytetään Server Actions -toimintojen kanssa?

Lomakkeita voidaan käyttää Server Actions -toimintojen kanssa. Yksinkertaisesti sanottuna lomakkeeseen lisätään erityinen koodi, joka määrittää, mitä toimintoa käytetään. Tämä toiminto vastaanottaa automaattisesti lomakkeeseen syötetyt tiedot.

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