Lendo Dados do Formulário

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

Sua action recebe um argumento: um objeto FormData. É um recurso nativo do navegador, e você só precisa de um método dele:

export async function addNote(formData) {
    const text = formData.get('text');
    const author = formData.get('author');
    saveNote(text, author);
}

A string que você passa para get() não é o id do input, nem o seu rótulo. É o atributo name:

<input name="author" />      →  formData.get('author')

Um input sem name é invisível para o formulário. Ele renderiza, você pode digitar nele, e seu valor simplesmente nunca chega: formData.get() retorna null. Este é o bug mais comum em um primeiro formulário com server action, e ele falha silenciosamente.

get() sempre retorna uma string (ou null), então um campo numérico precisa ser convertido:

const quantity = Number(formData.get('quantity'));

Desafio

Fácil

O formulário de notas está conectado, mas nada de útil é salvo: os elementos input não possuem name, e a action salva duas strings vazias.

Em app/page.jsx, adicione name="text" ao primeiro input e name="author" ao segundo.
Em app/actions.js, leia ambos os campos do formData em vez de usar as strings vazias.

Mantenha os ids como estão e mantenha a chamada saveNote(text, author): apenas os dois valores acima dela mudam.

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>
    );
}