Next.js 14 Server Actions: Lomakkeidenkäsittelyn parhaat käytännöt

Next.js 14 esittelee tehokkaita ominaisuuksia suorituskykyisten ja käyttäjäystävällisten verkkosovellusten rakentamiseen. Näistä Server Actions (palvelintoiminnot) erottuvat mullistavana tapana käsitellä lomakkeiden lähetyksiä ja datan mutaatioita suoraan palvelimella. Tämä opas tarjoaa kattavan yleiskatsauksen Next.js 14:n Server Actions -toimintoihin, keskittyen lomakkeiden käsittelyn parhaisiin käytäntöihin, datan validointiin, tietoturvaan ja edistyneisiin tekniikoihin. Käymme läpi käytännön esimerkkejä ja tarjoamme toimivia oivalluksia, jotka auttavat sinua rakentamaan vankkoja ja skaalautuvia verkkosovelluksia.

Mitä ovat Next.js Server Actions?

Server Actions ovat asynkronisia funktioita, jotka suoritetaan palvelimella ja joita voidaan kutsua suoraan React-komponenteista. Ne poistavat tarpeen perinteisille API-reiteille lomakkeiden lähetyksien ja datan mutaatioiden käsittelyssä, mikä johtaa yksinkertaisempaan koodiin, parempaan tietoturvaan ja tehostettuun suorituskykyyn. Server Actions ovat React Server Components (RSC), mikä tarkoittaa, että ne suoritetaan palvelimella, mikä nopeuttaa sivujen alkulatausaikoja ja parantaa SEO:ta.

Server Actions -toimintojen keskeiset edut:

Yksinkertaistettu koodi: Vähennä toistuvaa koodia poistamalla tarve erillisille API-reiteille.
Parannettu tietoturva: Palvelinpuolen suoritus minimoi asiakaspuolen haavoittuvuuksia.
Tehostettu suorituskyky: Suorita datan mutaatiot suoraan palvelimella nopeampien vastausaikojen saavuttamiseksi.
Optimoitu SEO: Hyödynnä palvelinpuolen renderöintiä parempaan hakukoneindeksointiin.
Tyyppiturvallisuus: Hyödy päästä-päähän-tyyppiturvallisuudesta TypeScriptin avulla.

Next.js 14 -projektin pystyttäminen

Ennen kuin sukellat Server Actions -toimintoihin, varmista, että sinulla on Next.js 14 -projekti pystytettynä. Jos aloitat tyhjästä, luo uusi projekti seuraavalla komennolla:

npx create-next-app@latest my-next-app

Varmista, että projektisi käyttää app-hakemistorakennetta hyödyntääksesi täysin Server Components -komponentteja ja Actions-toimintoja.

Peruslomakkeenkäsittely Server Actions -toiminnoilla

Aloitetaan yksinkertaisella esimerkillä: lomake, joka lähettää dataa uuden kohteen luomiseksi tietokantaan. Käytämme yksinkertaista lomaketta, jossa on syöttökenttä ja lähetyspainike.

Esimerkki: Uuden kohteen luominen

Määrittele ensin Server Action -funktio React-komponentissasi. Tämä funktio hoitaa lomakkeen lähetyslogiikan palvelimella.

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Simuloidaan tietokantavuorovaikutusta
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuloidaan viivettä

  console.log('Item created successfully!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    await createItem(formData);
    setIsSubmitting(false);
  }

  return (
    
      Kohteen nimi:
      
      
    
  );
}

Selitys:

'use client' -direktiivi osoittaa, että tämä on asiakaskomponentti.
createItem-funktio on merkitty 'use server' -direktiivillä, mikä osoittaa, että se on Server Action.
handleSubmit-funktio on asiakaspuolen funktio, joka kutsuu palvelintoimintoa. Se käsittelee myös käyttöliittymän tilaa, kuten painikkeen poistamista käytöstä lähetyksen aikana.
<form>-elementin action-ominaisuus on asetettu handleSubmit-funktioon.
formData.get('name')-metodi hakee 'name'-syöttökentän arvon.
await new Promise simuloi tietokantatoimintoa ja lisää viivettä.

Datan validointi

Datan validointi on ratkaisevan tärkeää datan eheyden varmistamiseksi ja tietoturvahaavoittuvuuksien estämiseksi. Server Actions tarjoavat erinomaisen mahdollisuuden suorittaa palvelinpuolen validointi. Tämä lähestymistapa auttaa vähentämään pelkästään asiakaspuolen validoinnin riskejä.

Esimerkki: Syötetietojen validointi

Muokkaa createItem Server Action -toimintoa sisällyttämällä siihen validointilogiikka.

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  if (!name || name.length < 3) {
    throw new Error('Kohteen nimen on oltava vähintään 3 merkkiä pitkä.');
  }

  // Simuloidaan tietokantavuorovaikutusta
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuloidaan viivettä

  console.log('Item created successfully!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Tapahtui virhe.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Kohteen nimi:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Selitys:

createItem-funktio tarkistaa nyt, onko name kelvollinen (vähintään 3 merkkiä pitkä).
Jos validointi epäonnistuu, heitetään virhe.
handleSubmit-funktio on päivitetty nappaamaan Server Action -toiminnon heittämät virheet ja näyttämään virheilmoituksen käyttäjälle.

Validointikirjastojen käyttö

Monimutkaisempia validointiskenaarioita varten harkitse validointikirjastojen käyttöä, kuten:

Zod: TypeScript-lähtöinen skeeman määrittely- ja validointikirjasto.
Yup: JavaScript-skeemarakentaja arvojen jäsentämiseen, validointiin ja muuntamiseen.

Tässä on esimerkki Zodin käytöstä:

// app/utils/validation.ts
import { z } from 'zod';

export const CreateItemSchema = z.object({
  name: z.string().min(3, 'Kohteen nimen on oltava vähintään 3 merkkiä pitkä.'),
});

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { CreateItemSchema } from '../utils/validation';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  const validatedFields = CreateItemSchema.safeParse({ name });

  if (!validatedFields.success) {
    return { errors: validatedFields.error.flatten().fieldErrors };
  }

  // Simuloidaan tietokantavuorovaikutusta
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuloidaan viivettä

  console.log('Item created successfully!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Tapahtui virhe.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Kohteen nimi:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Selitys:

CreateItemSchema määrittelee validointisäännöt name-kentälle Zodin avulla.
safeParse-metodi yrittää validoida syötetiedot. Jos validointi epäonnistuu, se palauttaa objektin, joka sisältää virheet.
errors-objekti sisältää yksityiskohtaista tietoa validointivirheistä.

Tietoturvanäkökohdat

Server Actions parantavat tietoturvaa suorittamalla koodia palvelimella, mutta on silti tärkeää noudattaa tietoturvan parhaita käytäntöjä suojataksesi sovellustasi yleisiltä uhilta.

Cross-Site Request Forgery (CSRF) -hyökkäysten estäminen

CSRF-hyökkäykset hyödyntävät luottamusta, joka verkkosivustolla on käyttäjän selaimeen. Estääksesi CSRF-hyökkäykset, ota käyttöön CSRF-suojausmekanismit.

Next.js hoitaa CSRF-suojauksen automaattisesti Server Actions -toimintoja käytettäessä. Kehys luo ja validoi CSRF-tunnisteen jokaiselle lomakkeen lähetykselle, varmistaen, että pyyntö on peräisin sovelluksestasi.

Käyttäjän todennuksen ja valtuutuksen käsittely

Varmista, että vain valtuutetut käyttäjät voivat suorittaa tiettyjä toimintoja. Ota käyttöön todennus- ja valtuutusmekanismit suojataksesi arkaluonteisia tietoja ja toiminnallisuuksia.

Tässä on esimerkki NextAuth.js:n käytöstä Server Action -toiminnon suojaamiseksi:

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { getServerSession } from 'next-auth';
import { authOptions } from '../../app/api/auth/[...nextauth]/route';

async function createItem(formData: FormData) {
  'use server'

  const session = await getServerSession(authOptions);

  if (!session) {
    throw new Error('Pääsy evätty');
  }

  const name = formData.get('name') as string;

  // Simuloidaan tietokantavuorovaikutusta
  console.log('Creating item:', name, 'by user:', session.user?.email);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuloidaan viivettä

  console.log('Item created successfully!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Tapahtui virhe.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Kohteen nimi:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Selitys:

getServerSession-funktio hakee käyttäjän istuntotiedot.
Jos käyttäjä ei ole todennettu (ei istuntoa), heitetään virhe, mikä estää Server Action -toiminnon suorittamisen.

Syötetietojen puhdistaminen

Puhdista syötetiedot estääksesi Cross-Site Scripting (XSS) -hyökkäykset. XSS-hyökkäykset tapahtuvat, kun haitallista koodia syötetään verkkosivustolle, mikä voi vaarantaa käyttäjätietoja tai sovelluksen toiminnallisuutta.

Käytä kirjastoja, kuten DOMPurify tai sanitize-html, käyttäjän syöttämien tietojen puhdistamiseen ennen niiden käsittelyä Server Actions -toiminnoissasi.

Edistyneet tekniikat

Nyt kun olemme käyneet läpi perusteet, tutkitaan joitakin edistyneitä tekniikoita Server Actions -toimintojen tehokkaaseen käyttöön.

Optimistiset päivitykset

Optimistiset päivitykset tarjoavat paremman käyttökokemuksen päivittämällä käyttöliittymän välittömästi ikään kuin toiminto onnistuisi, jo ennen kuin palvelin vahvistaa sen. Jos toiminto epäonnistuu palvelimella, käyttöliittymä palautetaan edelliseen tilaansa.

// app/components/UpdateItemForm.tsx
'use client';

import { useState } from 'react';

async function updateItem(id: string, formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Simuloidaan tietokantavuorovaikutusta
  console.log('Updating item:', id, 'with name:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuloidaan viivettä

  // Simuloidaan epäonnistumista (esittelytarkoituksessa)
  const shouldFail = Math.random() < 0.5;
  if (shouldFail) {
    throw new Error('Kohteen päivitys epäonnistui.');
  }

  console.log('Item updated successfully!');
  return { name }; // Palautetaan päivitetty nimi
}

export default function UpdateItemForm({ id, initialName }: { id: string; initialName: string }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  const [itemName, setItemName] = useState(initialName);

  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);

    // Päivitetään käyttöliittymä optimistisesti
    const newName = formData.get('name') as string;
    setItemName(newName);

    try {
      const result = await updateItem(id, formData);
      // Jos onnistuu, päivitys näkyy jo käyttöliittymässä setItemName:n kautta

    } catch (error: any) {
      setErrorMessage(error.message || 'Tapahtui virhe.');
      // Palautetaan käyttöliittymä virheen sattuessa
      setItemName(initialName);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Nykyinen nimi: {itemName}
      
        Uusi kohteen nimi:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Selitys:

Ennen Server Action -toiminnon kutsumista käyttöliittymä päivitetään välittömästi uudella kohteen nimellä käyttämällä setItemName-funktiota.
Jos Server Action epäonnistuu, käyttöliittymä palautetaan alkuperäiseen kohteen nimeen.

Datan uudelleenvalidointi

Kun Server Action on muokannut dataa, saatat joutua uudelleenvalidoimaan välimuistissa olevan datan varmistaaksesi, että käyttöliittymä heijastaa viimeisimpiä muutoksia. Next.js tarjoaa useita tapoja datan uudelleenvalidointiin:

Revalidate Path: Uudelleenvalidoi välimuistin tietylle polulle.
Revalidate Tag: Uudelleenvalidoi välimuistin dataan, joka liittyy tiettyyn tunnisteeseen.

Tässä on esimerkki polun uudelleenvalidoinnista uuden kohteen luomisen jälkeen:

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { revalidatePath } from 'next/cache';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Simuloidaan tietokantavuorovaikutusta
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simuloidaan viivettä

  console.log('Item created successfully!');

  revalidatePath('/items'); // Uudelleenvalidoi /items-polku
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Tapahtui virhe.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Kohteen nimi:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Selitys:

revalidatePath('/items')-funktio mitätöi /items-polun välimuistin, varmistaen, että seuraava pyyntö kyseiseen polkuun hakee uusimmat tiedot.

Server Actions -toimintojen parhaat käytännöt

Maksimoidaksesi Server Actions -toimintojen hyödyt, harkitse seuraavia parhaita käytäntöjä:

Pidä Server Actions -toiminnot pieninä ja kohdennettuina: Server Actions -toimintojen tulisi suorittaa yksi, selkeästi määritelty tehtävä. Vältä monimutkaista logiikkaa Server Actions -toiminnoissa ylläpitääksesi luettavuutta ja testattavuutta.
Käytä kuvaavia nimiä: Anna Server Actions -toiminnoillesi kuvaavia nimiä, jotka ilmaisevat selkeästi niiden tarkoituksen.
Käsittele virheet siististi: Ota käyttöön vankka virheenkäsittely antaaksesi informatiivista palautetta käyttäjälle ja estääksesi sovelluksen kaatumiset.
Validoi data perusteellisesti: Suorita kattava datan validointi varmistaaksesi datan eheyden ja estääksesi tietoturvahaavoittuvuudet.
Suojaa Server Actions -toimintosi: Ota käyttöön todennus- ja valtuutusmekanismit suojataksesi arkaluonteisia tietoja ja toiminnallisuuksia.
Optimoi suorituskyky: Seuraa Server Actions -toimintojesi suorituskykyä ja optimoi niitä tarvittaessa varmistaaksesi nopeat vastausajat.
Hyödynnä välimuistia tehokkaasti: Käytä Next.js:n välimuistimekanismeja parantaaksesi suorituskykyä ja vähentääksesi tietokannan kuormitusta.

Yleiset sudenkuopat ja niiden välttäminen

Vaikka Server Actions tarjoavat lukuisia etuja, on olemassa joitakin yleisiä sudenkuoppia, joista on syytä olla tietoinen:

Liian monimutkaiset Server Actions -toiminnot: Vältä liian suuren logiikan sijoittamista yhteen Server Action -toimintoon. Jaa monimutkaiset tehtävät pienempiin, hallittavampiin funktioihin.
Virheenkäsittelyn laiminlyönti: Sisällytä aina virheenkäsittely odottamattomien virheiden varalta ja anna käyttäjälle hyödyllistä palautetta.
Tietoturvan parhaiden käytäntöjen sivuuttaminen: Noudata tietoturvan parhaita käytäntöjä suojataksesi sovellustasi yleisiltä uhilta, kuten XSS ja CSRF.
Datan uudelleenvalidoinnin unohtaminen: Varmista, että uudelleenvalidoit välimuistissa olevan datan Server Action -toiminnon muokattua dataa, jotta käyttöliittymä pysyy ajan tasalla.

Yhteenveto

Next.js 14 Server Actions tarjoavat tehokkaan ja tehokkaan tavan käsitellä lomakkeiden lähetyksiä ja datan mutaatioita suoraan palvelimella. Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit rakentaa vankkoja, turvallisia ja suorituskykyisiä verkkosovelluksia. Ota Server Actions käyttöön yksinkertaistaaksesi koodiasi, parantaaksesi tietoturvaa ja parantaaksesi yleistä käyttökokemusta. Kun integroit näitä periaatteita, harkitse kehitysvalintojesi maailmanlaajuista vaikutusta. Varmista, että lomakkeesi ja datankäsittelyprosessisi ovat saavutettavia, turvallisia ja käyttäjäystävällisiä monipuolisille kansainvälisille yleisöille. Tämä sitoutuminen osallistavuuteen ei ainoastaan paranna sovelluksesi käytettävyyttä, vaan myös laajentaa sen tavoittavuutta ja tehokkuutta maailmanlaajuisesti.