Grunnleggende skjemaer med Server Actions
Opprett interaktive skjemaer som sender data direkte til serveren ved hjelp av Next.js Server Actions.
Grunnleggende skjemaer med Server Actions er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 1 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 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Introduksjon til Server Actions
Velkommen til Server Actions! Denne kraftige funksjonen i Next.js 15 lar Dem definere funksjoner som kjøres direkte på serveren, og som kan kalles fra klientkomponentene Deres.
Se på dem som en måte å sende data til serveren på uten å måtte opprette en separat API-rute. De forenkler dataendringer og innsending av skjemaer.
Hvorfor bruke Server Actions?
Server Actions gir Next.js-applikasjonene Deres flere viktige fordeler:
- Forenklede dataendringer: Kall serverkode direkte fra skjemaene Deres.
- Mindre JavaScript på klientsiden: Det må sendes mindre JavaScript til nettleseren.
- Bedre ytelse: Handlingene kjøres nærmere databasen, noe som potensielt reduserer forsinkelsen.
- Automatisk revalidering: De kan automatisk oppdatere bufrede data etter en vellykket dataendring (mer om dette i en senere leksjon!).
Definere en Server Action
En Server Action er en async-funksjon som er merket med direktivet "use server". Dette direktivet forteller Next.js at funksjonen skal behandles som kode som bare kjøres på serveren.
De kan definere handlinger direkte i komponentene Deres eller i en separat fil (for eksempel app/actions.js) og importere dem.
// app/actions.js
"use server";
export async function createItem(formData) {
const itemName = formData.get("itemName");
console.log(`Server received: ${itemName}`);
// In a real app, you'd save 'itemName' to a database
}Koble et skjema til en handling
For å koble et HTML-element av typen <form> til en Server Action sender De ganske enkelt handlingsfunksjonen direkte til skjemaets action-egenskap. Så enkelt er det!
Når skjemaet sendes inn, kaller Next.js automatisk den angitte Server Action.
// app/page.js
import { createItem } from './actions';
export default function Page() {
return (
<form action={createItem}>
<label htmlFor="item">New Item:</label>
<input type="text" id="item" name="itemName" required />
<button type="submit">Add Item</button>
</form>
);
}Få tilgang til skjemadata
Når et skjema sendes til en Server Action, mottar handlingsfunksjonen automatisk et FormData-objekt som sitt første argument.
De kan bruke formData.get('fieldName') til å hente verdien fra et inndatafelt basert på name-attributtet.
// app/actions.js
"use server";
export async function processForm(formData) {
const username = formData.get("username");
const email = formData.get("email");
const age = formData.get("age");
console.log(`User: ${username}, Email: ${email}, Age: ${age}`);
// Perform server-side logic, e.g., save user to database
}Fullstendig skjemaeksempel
La oss kombinere det vi har lært, i et enkelt skjema for en gjestebokoppføring. Server Action logger meldingen fra gjesten.
Husk at denne koden er beregnet på et Next.js-miljø og ikke kan kjøres som en frittstående JS-fil.
// app/actions.js
"use server";
export async function addGuestbookEntry(formData) {
const message = formData.get("message");
console.log(`New guestbook entry: ${message}`);
// In a real app, save to DB and revalidate cache
}
// app/page.js
import { addGuestbookEntry } from './actions';
export default function GuestbookPage() {
return (
<div>
<h1>Guestbook</h1>
<form action={addGuestbookEntry}>
<textarea name="message" rows="4" cols="30" placeholder="Your message..." required></textarea>
<button type="submit">Sign Guestbook</button>
</form>
</div>
);
}Håndtere flere inndatafelt
FormData-objektet samler effektivt inn alle inndatafeltene i skjemaet som har et name-attributt. De kan få tilgang til dem enkeltvis.
formData.get('inputName'): Henter den første verdien for et gitt navn.formData.getAll('inputName'): Returnerer en matrise med alle verdiene for inndatafelt med samme navn (nyttig for flere avkrysningsbokser).formData.entries(): Returnerer en iterator for alle nøkkel/verdi-par.
Tilbakemelding til brukeren: innlastingstilstander
Når et skjema sendes inn, er det god praksis å gi brukeren visuell tilbakemelding. Next.js og React tilbyr useFormStatus-hooken til dette.
useFormStatus forteller Dem om det overordnede <form>-elementet sendes inn for øyeblikket, slik at De kan deaktivere knapper eller vise en innlastingsindikator.
// app/page.js (inside a component, e.g., SubmitButton.js)
import { useFormStatus } from "react-dom";
function SubmitButton() {
const { pending } = useFormStatus(); // Gets status from parent <form>
return (
<button type="submit" disabled={pending}>
{pending ? "Submitting..." : "Submit"}
</button>
);
}
// In your page.js:
// import { addGuestbookEntry } from './actions';
// export default function Page() {
// return (
// <form action={addGuestbookEntry}>
// {/* ... other inputs */}
// <SubmitButton />
// </form>
// );
// }Hurtigsjekk
Hvilke påstander om grunnleggende Server Action-skjemaer i Next.js er riktige?
Oppsummering og neste steg
Godt jobbet! De har lært det grunnleggende om å opprette enkle skjemaer med Server Actions i Next.js:
- Server Actions er serverfunksjoner merket med
"use server". - De forenkler innsending av skjemaer ved at De kan sende handlingen direkte til skjemaets
action-egenskap. - Skjemadata åpnes i handlingen via et
FormData-objekt. useFormStatus-hooken hjelper Dem med å implementere innlastingsindikatorer.
Deretter skal vi se nærmere på hvordan Server Actions kan endre data og automatisk revalidere brukergrensesnittet!
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
- 22
- Leksjoner
- 88
Ofte stilte spørsmål
Er leksjonen «Grunnleggende skjemaer med Server Actions» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Grunnleggende 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 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Hva lærer jeg i «Grunnleggende skjemaer med Server Actions»?
Opprett interaktive skjemaer som sender data direkte til serveren ved hjelp av Next.js Server Actions. Du øver på Next.js 15 fullstack (App Router + Server Actions) 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 fullstack (App Router + Server Actions)?
Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) 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 1 av 4.
Hvor lang tid tar leksjonen «Grunnleggende 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 fullstack (App Router + Server Actions)-leksjonen?
Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-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
- Grunnleggende skjemaer med Server Actions
- Endring av data og revalidering
- Feilhåndtering i actions
- Optimistisk UI og ventetilstander med Server Actions