server-actions
Obsługuj formularze i mutacje danych bezpośrednio na serwerze Next.js bez API
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Server Actions to asynchroniczne funkcje wykonywane na serwerze, które uprościć obsługę formularzy i mutacji danych w Next.js App Router. Zamiast pisać oddzielne endpointy API, definiujesz akcje bezpośrednio w komponentach lub dedykowanych plikach, a następnie łączysz je z formularzami. Skill obejmuje przykłady form submission, obsługi FormData, revalidacji ścieżek i tagów, oraz integracji z hookami useFormState i useFormStatus. Idealne dla developerów budujących aplikacje Next.js, którzy chcą uprościć przepływ danych między frontendem a backendem.
Jak używać
Zainstaluj skill server-actions w swoim projekcie Next.js. Skill zawiera szablony i dokumentację do pracy z Server Actions w App Router.
Utwórz plik akcji (np. app/actions.ts) i dodaj dyrektywę 'use server' na górze pliku. Zdefiniuj funkcje asynchroniczne, które będą obsługiwać mutacje danych — na przykład createPost, deletePost czy submitContact. Każda funkcja otrzyma FormData z formularza.
W komponencie (Server lub Client Component) zaimportuj akcję i przekaż ją do atrybutu action w tagu form. Formularz automatycznie wyśle dane do akcji na serwerze bez konieczności pisania fetch czy API route.
Wewnątrz akcji wyodrębnij dane z FormData za pomocą get(), waliduj je i wykonaj operacje bazodanowe (create, update, delete). Po zakończeniu możesz użyć revalidatePath lub revalidateTag do odświeżenia cache'u.
Dla bardziej zaawansowanej obsługi formularzy użyj hooków useFormState i useFormStatus — pozwalają one śledzić stan submisji i wyświetlać feedback użytkownikowi w czasie rzeczywistym.
Testuj akcje poprzez normalne submisje formularzy w aplikacji. Skill zawiera przykłady contact form i post creation, które możesz dostosować do swoich potrzeb.