O que é uma Server Action

Você pode ler dados no server agora. Hora da outra metade: alterá-los.

Até recentemente, salvar uma linha de texto exigia uma quantidade surpreendente de cerimônia. Você escrevia um endpoint:

// app/api/items/route.js
export async function POST(request) {
    const body = await request.json();
    saveItem(body.text);
    return Response.json({ ok: true });
}

…e depois o chamou do navegador:

await fetch('/api/items', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
});

Dois arquivos, uma URL, um method, headers e JSON em ambas as direções, para mover uma string de um form para um banco de dados.

Uma Server Action elimina tudo isso. Escreva uma função async em um arquivo cuja primeira linha seja 'use server':

// app/actions.js
'use server';

import { saveItem } from '../lib/db';

export async function addItem(formData) {
    saveItem(formData.get('text'));
}

…e passar essa função para um formulário:

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

Isso é tudo. Três detalhes valem a pena destacar:

• 'use server' deve ser a primeira linha do arquivo: o mesmo tipo de marcador que 'use client', mas apontando para o outro lado. Ele diz: tudo exportado aqui executa no servidor.
• O corpo da função nunca chega ao navegador. Suas credenciais do banco de dados estão seguras dentro dele: o navegador recebe apenas uma referência que ele pode chamar.
• Você nunca escreveu uma URL. O Next.js cria o endpoint para você; action={addItem} é a conexão.

Um contraste com Fundamentals: estes inputs de formulário são não controlados. Sem useState, sem value, sem onChange: o navegador mantém o texto, e o atributo name é como a action o encontra no envio.