Recapitulando: Server Actions

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 33 de 47.

Desafio

Médio

Recapítulo do capítulo: o livro de visitas (guestbook) abaixo não salva nada e nunca é atualizado. Construa o fluxo completo: formulário → ação → página atualizada.

Em app/actions.js, marque o arquivo com 'use server' na sua primeira linha, e após o salvamento chame revalidatePath('/') (importado de 'next/cache').
Em app/page.jsx, importe addGuest de './actions' e envolva o input e o button em um <form> com id="guest-form" e action={addGuest}.
Dê ao input o atributo name="name": essa é a chave que a ação lê com formData.get('name').

Experimente você mesmo

import './globals.css';

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

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

Todas as lições de Essenciais do Next.js

1Por que usar o Next.js

O que o Next.js adiciona A pasta App Sua primeira página Recapitulação: Por que usar o Next.js

4Servidor & Cliente

Dois Tipos de Componente Lendo o Erro A Linha 'use client'Mantenha as Partes de Cliente Pequenas Servidor Dentro do Cliente Recapitulação: Servidor & Cliente

7Navegação do Cliente

O Link Ativo Roteamento Programático Filtrando com a URL Manipuladores de Rota Recapitulando: Navegação

3Layouts e Metadados

O Layout Raiz Navegação Compartilhada Layouts Aninhados Metadados da Página Metadados Dinâmicos Recapitulação: Layouts

6Server Actions

O que é uma Server Action Formulários que Executam Ações Lendo Dados do Formulário Atualizando a PáginaRecapitulando: Server Actions