Jeszcze kilka lat temu większość aplikacji React wymagała osobnych endpointów API praktycznie do każdej operacji. Next.js Server Actions znacząco upraszczają ten proces i pozwalają pisać mniej kodu przy zachowaniu wysokiej wydajności oraz bezpieczeństwa.

W Netova wykorzystujemy Server Actions w panelach administracyjnych, formularzach kontaktowych, systemach CMS oraz aplikacjach SaaS. Dzięki temu aplikacje są prostsze w utrzymaniu i rozwijaniu.

Czym są Server Actions?

Server Actions to funkcje wykonywane wyłącznie po stronie serwera.

Nie są wysyłane do przeglądarki użytkownika, dzięki czemu możesz bezpiecznie:

zapisywać dane do bazy
wysyłać wiadomości e-mail
komunikować się z API
wykonywać autoryzację
obsługiwać formularze

Bez konieczności tworzenia osobnych endpointów API.

Przykład Server Action

"use server";

import { db } from "@/lib/db";

export async function createContact(formData: FormData) {
  const name = formData.get("name")?.toString();
  const email = formData.get("email")?.toString();

  await db.contact.create({
    data: {
      name,
      email,
    },
  });
}

Cała logika wykonywana jest na serwerze.

Formularz korzystający z Server Action

import { createContact } from "./actions";

export default function ContactForm() {
  return (
    <form action={createContact}>
      <input name="name" placeholder="Imię" />

      <input name="email" type="email" placeholder="Email" />

      <button type="submit">Wyślij</button>
    </form>
  );
}

Nie potrzebujesz już fetch(), axios ani własnego endpointu API.

Dlaczego warto korzystać z Server Actions?

Najważniejsze zalety:

mniej kodu
prostsza architektura
większe bezpieczeństwo
lepsza współpraca z React Server Components
łatwiejsze zarządzanie formularzami

To rozwiązanie szczególnie dobrze sprawdza się w aplikacjach biznesowych.

Łatwa integracja z bazą danych

Server Actions świetnie współpracują z:

Prisma
Drizzle ORM
Supabase
Turso
PostgreSQL
MySQL

Przykład:

await db.post.create({
  data: {
    title,
    content,
  },
});

Bez dodatkowych warstw komunikacji.

Revalidacja danych

Po zapisaniu danych możesz automatycznie odświeżyć stronę.

import { revalidatePath } from "next/cache";

revalidatePath("/dashboard");

Użytkownik od razu zobaczy zaktualizowane informacje.

Kiedy używać Server Actions?

To świetny wybór dla:

formularzy kontaktowych
paneli administracyjnych
systemów CMS
aplikacji SaaS
systemów rezerwacji
sklepów internetowych
dashboardów

Nie oznacza to jednak, że klasyczne API przestało być potrzebne. Jeżeli tworzysz publiczne API dla aplikacji mobilnej lub zewnętrznych integracji, Route Handlers nadal będą najlepszym rozwiązaniem.

Server Actions a bezpieczeństwo

Ponieważ kod wykonywany jest wyłącznie na serwerze, możesz bezpiecznie korzystać z:

kluczy API
danych dostępowych
połączeń z bazą danych
logiki biznesowej

Nie trafiają one do kodu JavaScript pobieranego przez przeglądarkę.

Podsumowanie

Server Actions to jedna z najważniejszych funkcji nowoczesnego Next.js. Pozwalają znacząco uprościć architekturę aplikacji, zmniejszyć ilość kodu oraz poprawić bezpieczeństwo.

W Netova wykorzystujemy je w większości nowych projektów, ponieważ pozwalają szybciej rozwijać aplikacje bez rezygnowania z dobrych praktyk programistycznych.

Jeżeli planujesz budowę nowoczesnej strony internetowej, panelu administracyjnego lub aplikacji SaaS, odpowiednia architektura od samego początku znacząco ułatwi rozwój projektu w przyszłości.

Potrzebujesz nowoczesnej aplikacji Next.js? Skontaktuj się z Netova.

Next.js Server Actions - Jak uprościć backend w nowoczesnych aplikacjach?