Next.js 14/15: A Morte das API Routes? O Duelo Definitivo

Se você é um Tech Lead ou CTO focado em eficiência, sabe que o "context switching" é o assassino silencioso da produtividade. A separação artificial entre backend e frontend, quando ambos vivem no mesmo repositório, muitas vezes gera mais burocracia do que valor.

Com a chegada do Next.js 14 (e as refinações do 15), as Server Actions prometeram mudar esse jogo, trazendo uma abordagem "RPC-like" que elimina a necessidade de criar endpoints de API manuais.

O Que São Server Actions (e Por Que Você Deveria Se Importar)

Em termos simples, Server Actions são funções assíncronas que rodam exclusivamente no servidor, mas podem ser invocadas diretamente de componentes como se fossem funções JavaScript locais.

Por trás dos panos, o Next.js faz o trabalho pesado: ele cria um endpoint HTTP oculto, serializa os argumentos, envia via POST e executa a função.

A Vitória da DX (Developer Experience)

A maior vantagem competitiva aqui é a coesão. O código que executa a lógica de banco de dados vive ao lado do código que desenha a UI.

Exemplo Prático: O Jeito "Antigo" (API Routes)

Você precisaria de dois arquivos distintos.

1. O Handler da API (app/api/todo/route.ts):

import { NextResponse } from 'next/server';
import { db } from '@/lib/db';

export async function POST(request: Request) {
  const body = await request.json();
  const todo = await db.todo.create({ data: { title: body.title } });
  return NextResponse.json(todo);
}

2. O Componente Cliente (app/page.tsx):

'use client';
// Imports e boilerplate...

export default function Page() {
  const [loading, setLoading] = useState(false);

  async function onSubmit(e) {
    e.preventDefault();
    await fetch('/api/todo', {
      method: 'POST',
      body: JSON.stringify({ title: 'Novo Item' }),
    });
  }
}

Exemplo com Server Actions:

Tudo pode viver em um único arquivo, com tipagem automática.

// app/actions.ts
'use server';
import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';

export async function createTodo(formData: FormData) {
  const title = formData.get('title') as string;
  await db.todo.create({ data: { title } });
  revalidatePath('/');
}

Quando Usar Server Actions: O Sweet Spot

Para Tech Leads definindo a arquitetura de novos projetos no Abstract Studio, a regra de ouro é: Use Server Actions para mutações de dados disparadas pela UI.

1. Formulários e Mutações: Se o usuário clica em um botão para salvar, deletar ou atualizar algo. Elas se integram nativamente com useFormStatus.

2. Progressive Enhancement: Server Actions funcionam mesmo se o JavaScript estiver desabilitado (dentro de um form).

3. Segurança: Como o código nunca é enviado para o cliente, você pode usar chaves secretas diretamente.

Quando as API Routes Ainda São Reis

• Webhooks de Terceiros: Stripe, GitHub, etc, precisam de uma rota RESTful pública.

• APIs Públicas (REST/GraphQL): Para oferecer acesso a devs externos.

• Edge Computing complexo: Quando precisa de streaming de binários complexos.

Conclusão: Simplifique para Escalar

Para a maioria das aplicações SaaS construídas hoje:

• Adote Server Actions como padrão para interações da UI.

• Reserve API Routes estritamente para integrações externas.

Sua arquitetura está pronta para escalar? Na Abstract Studio, desenhamos sistemas eficientes. Vamos conversar.