Server Actions to asynchroniczne funkcje, które działają na serwerze, ale można je wywoływać bezpośrednio z komponentów (również z formularzy i procedur obsługi zdarzeń) — umożliwiając Ci wykonywanie mutacji (create/update/delete) bez ręcznego tworzenia punktu końcowego API. Oznaczasz je dyrektywą "use server".
;
{ revalidatePath } ;
() {
title = formData.() ;
db..({ : { title } });
();
}
// app/todos/page.tsx — wire the action straight to a form
import { createTodo } from "./actions";
export default function Page() {
return (
<form action={createTodo}> {/* no onSubmit, no fetch, no /api route */}
<input name="title" />
<button>Add</button>
</form>
);
}
Atrybut action formularza wskazuje na Server Action. Po przesłaniu Next.js wysyła FormData na serwer, uruchamia tam funkcję i może ponownie zwalidować dotknięte strony — wszystko bez trasy API i bez kodu pobierania po stronie klienta.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts i pobierania klienta.revalidatePath/revalidateTag odświeżają buforowane dane po mutacji.⚠️ Server Actions are PUBLIC endpoints under the hood — always validate input and
check authorization inside them, exactly as you would a real API route.
Server Actions zwijają zwyczajny stos mutacji (trasa API + pobieranie klienta + obsługa stanu) w jedną funkcję serwera, którą wywołujesz bezpośrednio — odpowiedź App Router na formularze i zmiany danych.
Zmniejszają one boilerplate, umożliwiają ulepszenie progresywne i integrują się z buforowaniem/ponowną walidacją, ale (jak każdy punkt końcowy) wymagają wewnątrz nich walidacji i kontroli autoryzacji.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj