João Bruno — Fullstack Developer

O que são Server Actions?

Server Actions são funções assíncronas que rodam exclusivamente no servidor mas podem ser chamadas diretamente do cliente — sem precisar criar rotas de API manualmente. Isso simplifica drasticamente o código para operações de mutação.

// Antes: você precisava de uma API route
// app/api/submit/route.ts
export async function POST(req: Request) {
  const body = await req.json();
  // ...
}
 
// Depois: Server Action direto no componente
'use server';
export async function submitForm(data: FormData) {
  // roda no servidor!
  await db.insert(data);
}

Criando sua Primeira Server Action

A forma mais simples é declarar 'use server' no topo de um arquivo ou no início de uma função async:

// actions/create-post.ts
'use server';
 
import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';
 
export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
 
  if (!title || !content) {
    return { error: 'Campos obrigatórios' };
  }
 
  await db.post.create({
    data: { title, content },
  });
 
  revalidatePath('/blog');
  return { success: true };
}

Integrando com React Hook Form

Para validação client-side + submissão server-side:

'use client';
 
import { useForm } from 'react-hook-form';
import { createPost } from '@/actions/create-post';
 
export function PostForm() {
  const { register, handleSubmit } = useForm();
 
  const onSubmit = async (data: FormData) => {
    const result = await createPost(data);
    if (result.error) {
      // mostrar erro
    }
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('title')} />
      <textarea {...register('content')} />
      <button type="submit">Publicar</button>
    </form>
  );
}

Dicas de Performance

1. Use `useTransition` para feedback de loading

const [isPending, startTransition] = useTransition();
 
const handleSubmit = () => {
  startTransition(async () => {
    await createPost(formData);
  });
};

2. Otimistic Updates com `useOptimistic`

const [optimisticPosts, addOptimisticPost] = useOptimistic(
  posts,
  (state, newPost) => [...state, newPost]
);

Conclusão

Server Actions representam uma mudança de paradigma no desenvolvimento React. Ao eliminar a necessidade de criar API routes para operações simples, o código fica mais organizado, typesafe e fácil de manter.

A melhor feature do Next.js nos últimos anos. Finalmente podemos ter tipo segurança de ponta a ponta sem GraphQL ou tRPC.

Experimente em seu próximo projeto e sinta a diferença!

Server Actions no Next.js 15: O Guia Definitivo