Next.js 15 for fullstack-webapper · leksjon

Fullstack-skjemaer med Server Actions

Bruk Server Actions til å håndtere skjemainnsendinger direkte på serveren, noe som forenkler dataendringer.

Leksjon 3 av 411 trinn

Fullstack-skjemaer med Server Actions er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva er Server Actions?

Server Actions i Next.js 15 lar deg kjøre kode på serveren direkte fra React-komponentene dine. Dette er en kraftig funksjon som forenkler dataendringer og samhandling med backend.

Se på dem som små, direkte forbindelser til serverlogikken din, uten at du trenger å opprette separate API-ruter for hver backend-oppgave.

Skjemaer og Server Actions

En av de viktigste bruksområdene for Server Actions er håndtering av innsendinger av skjemaer. Når du kobler et HTML-<form>-element til en Server Action, sender nettleseren automatisk skjemadataene til serverfunksjonen din.

action-attributtet til <form> peker direkte på Server Action-funksjonen din.
Dette fjerner behovet for JavaScript på klientsiden for å hente inn og sende skjemadata, slik at skjemaene blir enklere og mer robuste.

Definere din første action

En Server Action er ganske enkelt en asynkron JavaScript-funksjon som er merket med direktivet "use server". Dette direktivet forteller Next.js at funksjonen skal kjøres på serveren.

Du kan definere Server Actions direkte i React-komponentene dine (hvis de er Server Components), eller i separate filer for bedre organisering.

Grunnleggende eksempel på en Server Action

La oss opprette et enkelt skjema som tar imot et brukernavn. Når skjemaet sendes inn, logger en Server Action brukernavnet på serveren. Legg merke til "use server" øverst i funksjonen.

// app/page.js

// This async function is our Server Action
async function processUsername(formData) {
  "use server"; // Marks this function to run on the server
  const username = formData.get('username'); // Get value by input's 'name' attribute
  console.log('Server received username:', username);
  // In a real application, you'd typically save this to a database
}

export default function HomePage() {
  return (
    <div>
      <h1>Enter Your Username</h1>
      <form action={processUsername}> {/* Link form to the Server Action */}
        <input type="text" name="username" placeholder="Your username" required />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Få tilgang til skjemadata

Når et skjema sendes inn til en Server Action, mottar actionen et FormData-objekt som sitt første argument. Dette objektet er et standardisert web-API som inneholder alle nøkkel-verdi-parene fra inndatafeltene i skjemaet.

Bruk formData.get('fieldName') for å hente verdien til et bestemt inndatafelt.
'fieldName' må samsvare med name-attributtet til HTML-inndataelementet ditt (for eksempel <input name="username" />).

Omdirigere etter innsending

Etter at en bruker har sendt inn et skjema, og Server Action-en har behandlet dataene (for eksempel lagret dem i en database), vil du ofte omdirigere brukeren til en annen side, for eksempel en bekreftelsesside eller en listevisning.

Next.js tilbyr funksjonen redirect fra next/navigation, som du kan kalle direkte i Server Action-en for å navigere brukeren til en ny rute.

Eksempel på action med omdirigering

La oss utvide skjemaet slik at brukeren omdirigeres etter en vellykket innsending. Her omdirigerer vi til /success-page.

// app/page.js
import { redirect } from 'next/navigation'; // Import the redirect function

async function handleSubmit(formData) {
  "use server";
  const username = formData.get('username');
  console.log('Processing username:', username);

  // In a real app, you'd do database operations here

  // After successful processing, redirect the user
  redirect('/success-page'); 
}

export default function SignupPage() {
  return (
    <div>
      <h1>Sign Up</h1>
      <form action={handleSubmit}>
        <input type="text" name="username" placeholder="Username" required />
        <button type="submit">Register</button>
      </form>
    </div>
  );
}

// Note: For this example to fully work, you would need an actual
// app/success-page/page.js file with some content.

Grunnleggende feilhåndtering

Server Actions kan støte på feil, for eksempel ugyldige inndata eller databaseproblemer. Du kan bruke vanlige JavaScript-blokker med try...catch i action-en for å håndtere disse mulige problemene på en god måte.

For mer avansert tilbakemelding om feil til brukeren kan du returnere data fra action-en til klientkomponenten eller bruke et spesialisert skjemabibliotek.

Oppdatere brukergrensesnittet med revalidering

Etter at en Server Action har endret data (for eksempel lagt til et nytt innlegg), kan det hende at brukergrensesnittet må oppdateres for å gjenspeile endringen. Next.js tilbyr funksjoner som revalidatePath og revalidateTag fra next/cache.

Disse funksjonene forteller Next.js at data for en bestemt bane eller en bufret datakode skal hentes og gjengis på nytt. Dermed ser brukerne alltid den nyeste informasjonen uten å måtte laste inn hele siden på nytt.

Spørsmål om Server Actions

Se på følgende Server Action og skjema i en Next.js-applikasjon som bruker App Router:

// app/add-task/page.js
import { redirect } from 'next/navigation';

async function createTask(formData) {
  "use server";
  const taskTitle = formData.get('title');

  if (taskTitle.length < 5) {
    throw new Error('Task title must be at least 5 characters long.');
  }

  console.log('Creating task:', taskTitle);
  // Simulate saving to database
  redirect('/tasks');
}

export default function AddTaskPage() {
  return (
    <form action={createTask}>
      <input type="text" name="title" placeholder="Task Title" />
      <button type="submit">Add Task</button>
    </form>
  );
}

Besvar den i den interaktive leksjonen

Oppsummering: Fullstack-skjemaer

Du har mestret hvordan Server Actions forenkler fullstack-håndtering av skjemaer i Next.js 15!

Server Actions (`"use server"`) kjører kode direkte på serveren.
HTML <form action={yourAction}> sender automatisk FormData til action-en din.
Få tilgang til skjemafelt med formData.get('name').
Bruk redirect fra next/navigation til navigering etter innsending.
Implementer feilhåndtering med try...catch i action-ene dine.
Vurder revalidatePath eller revalidateTag for å oppdatere brukergrensesnittet etter dataendringer.

Dette mønsteret reduserer mengden standardkode og effektiviserer arbeidsflyten for dataendringer.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Fullstack-skjemaer med Server Actions» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Fullstack-skjemaer med Server Actions», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Fullstack-skjemaer med Server Actions»?

Bruk Server Actions til å håndtere skjemainnsendinger direkte på serveren, noe som forenkler dataendringer. Du øver på Next.js 15 for fullstack-webapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Next.js 15 for fullstack-webapper?

Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Fullstack-skjemaer med Server Actions»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Next.js 15 for fullstack-webapper-leksjonen?

Ja. Alle Next.js 15 for fullstack-webapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Kontrollerte komponenter og tilstand
Skjemavalidering med React Hook Form
Fullstack-skjemaer med Server Actions
Filopplastinger og multipart-skjemahåndtering

← Tilbake til Next.js 15 for fullstack-webapper