Récapitulatif : Server Actions

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 33 sur 47.

Défi

Moyen

Récapitulatif du chapitre : le livre d'or ci-dessous n'enregistre rien et ne se met jamais à jour. Créez l'ensemble du flux : formulaire → action → page actualisée.

Dans app/actions.js, marquez le fichier avec 'use server' sur sa première ligne, et après la sauvegarde, appelez revalidatePath('/') (importé depuis 'next/cache').
Dans app/page.jsx, importez addGuest depuis './actions' et enveloppez l'input et le button dans un <form> avec id="guest-form" et action={addGuest}.
Donnez à l'input le nom name="name" : c'est la key que l'action lit avec formData.get('name').

Essayez vous-même

import './globals.css';

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

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

Toutes les leçons de L'essentiel de Next.js

1Pourquoi Next.js

Ce que Next.js apporte Le dossier App Votre première page Récapitulatif : Pourquoi Next.js

4Serveur & Client

Deux types de composants Lire l'erreur La ligne 'use client'Garder les parties client de petite taille Serveur dans le client Récapitulatif : Serveur & Client

7Navigation côté client

Le lien actif Routage programmatique Filtrage avec l'URL Gestionnaires de routes Récapitulatif : Navigation

3Mises en page et métadonnées

La mise en page racine Navigation partagée Mises en page imbriquées Métadonnées de page Métadonnées dynamiques Récapitulatif : Mises en page

6Server Actions

Qu'est-ce qu'une Server Action Des formulaires interactifs Lire les données d'un formulaire Actualiser la pageRécapitulatif : Server Actions