Podsumowanie: akcje serwerowe

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 33 z 47.

Wyzwanie

Średni

Podsumowanie rozdziału: poniższa księga gości niczego nie zapisuje i nigdy się nie aktualizuje. Zbuduj cały przepływ: formularz → akcja → odświeżona strona.

W pliku app/actions.js oznacz plik za pomocą 'use server' w pierwszym wierszu, a po wywołaniu zapisu dodaj revalidatePath('/') (zaimportowane z 'next/cache').
W pliku app/page.jsx zaimportuj addGuest z './actions' i umieść pole wejściowe oraz przycisk w elemencie <form> z id="guest-form" i action={addGuest}.
Ustaw dla pola wejściowego name="name": to klucz, który akcja odczytuje za pomocą formData.get('name').

Spróbuj swoich sił

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

Wszystkie lekcje w sekcji Podstawy Next.js

1Dlaczego Next.js

Co dodaje Next.js Folder app Twoja pierwsza strona Podsumowanie: Dlaczego Next.js

4Serwer i klient

Dwa rodzaje komponentów Odczytywanie błędu Linia „use client”Ograniczaj części klienckie Serwer wewnątrz klienta Podsumowanie: serwer i klient

7Nawigacja po stronie klienta

Aktywny link Routing programowy Filtrowanie za pomocą URL Obsługa tras Podsumowanie: nawigacja

3Układy i metadane

Układ główny Wspólna nawigacja Zagnieżdżone układy Metadane strony Dynamiczne metadane Podsumowanie: układy

6Akcje serwerowe

Czym jest akcja serwerowa Formularze, które działają Odczytywanie danych formularza Odświeżanie stronyPodsumowanie: akcje serwerowe