O Next.js tem se consolidado como uma das soluções mais poderosas para o desenvolvimento full-stack em React. Com a evolução contínua do framework, novos recursos estão sendo introduzidos para melhorar a eficiência do desenvolvimento. Dois desses recursos são as Server Actions (ações do servidor) e os Route Handlers (manipuladores de rotas). Ambos desempenham papéis fundamentais na criação de aplicações que combinam frontend e backend de maneira fluida, mas são usados de formas diferentes e servem a propósitos distintos.

Neste artigo, vamos explorar em detalhes como as Server Actions e os Route Handlers funcionam, suas vantagens, exemplos de uso e como eles podem ser combinados para criar aplicações eficientes e seguras.

Server Actions: O Que São e Como Funcionam?

As Server Actions no Next.js são um recurso experimental que permite executar código diretamente no servidor a partir de componentes React. Elas simplificam a comunicação entre o frontend e o backend, permitindo que ações como consultas a bancos de dados ou processamento de dados sejam realizadas no servidor, sem a necessidade de configurar rotas API explícitas.

Por Que Usar Server Actions?

• Redução de Código Boilerplate : Ao invés de configurar APIs REST ou GraphQL separadas, você pode definir uma ação diretamente no componente e executá-la no servidor.
• Segurança : Qualquer lógica sensível, como chamadas de API com chaves privadas ou interações com o banco de dados, pode ser mantida no servidor, sem exposição ao cliente.
• Desempenho : Como as ações são executadas no servidor, é possível otimizar o tempo de resposta e reduzir a carga no cliente.
• Fluxo Simples de Dados : Ao invés de lidar com fetch ou axios para buscar ou enviar dados, você apenas chama uma função do servidor.

Como Funciona?

A função de uma Server Action é executada no servidor, mas pode ser chamada diretamente a partir do frontend de um componente React. Ao marcá-la como uma função async, você pode executar qualquer lógica que normalmente seria reservada para o backend.

Exemplo Simples de Server Action :

import { useState, useTransition } from 'react';

// Definindo uma Server Actionasync function addUserToDatabase(name: string) {
  // Simula a lógica de servidor (ex: consulta ao banco de dados)await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log(`Usuário ${name} adicionado ao banco de dados.`);
}

export default function HomePage() {
  const [isPending, startTransition] = useTransition();
  const [name, setName] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    startTransition(() => addUserToDatabase(name));
  };

  return (
    <form onSubmit={handleSubmit}><inputtype="text"value={name}onChange={(e) => setName(e.target.value)}
        placeholder="Nome do usuário"
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Adicionando...' : 'Adicionar Usuário'}
      </button></form>
  );
}

Neste exemplo, o formulário recebe o nome do usuário, e quando o formulário é enviado, a função addUserToDatabase (uma Server Action) é chamada, simulando a adição do usuário a um banco de dados.

Gerenciando Estados com Server Actions

Como as Server Actions são assíncronas, é importante gerenciar o estado de carregamento para manter a experiência do usuário fluida. O hook useTransition pode ser usado para lidar com transições de estado, como mostrado no exemplo acima. Isso permite que a interface continue responsiva enquanto a ação está sendo processada no servidor.

Vantagens das Server Actions

1. Lógica Segura : Mantém a lógica sensível e dados protegidos no servidor.
2. Redução de Overhead : Evita a necessidade de configurar APIs REST ou GraphQL para operações simples.
3. Desempenho e Escalabilidade : Server Actions são executadas no servidor, o que pode melhorar a latência e o desempenho geral da aplicação.
4. Abstração de Chamadas HTTP : Elimina a necessidade de trabalhar diretamente com fetch ou axios para requisições.

Limitações e Considerações

As Server Actions ainda estão em fase experimental, o que significa que podem sofrer mudanças em versões futuras do Next.js. Também é importante lembrar que esse recurso não substitui completamente a necessidade de APIs em cenários mais complexos, especialmente quando há múltiplos clientes ou integração com outras aplicações.

Route Handlers: O Fundamento das APIs no Next.js

Os Route Handlers no Next.js são uma abordagem poderosa e direta para lidar com requisições HTTP, funcionando como uma forma simplificada de criar APIs RESTful diretamente na estrutura de diretórios app/. Eles fornecem a capacidade de responder a diferentes métodos HTTP (GET, POST, PUT, DELETE, etc.), permitindo o desenvolvimento de APIs diretamente no ambiente do Next.js.

Estrutura de um Route Handler

Os Route Handlers são definidos dentro da pasta app/api, com cada rota sendo representada por um arquivo route.ts (ou route.js). Cada arquivo define como diferentes métodos HTTP são tratados.

Exemplo de Route Handler :

import { NextResponse } from 'next/server';

// Tratando requisição GETexport async function GET() {
  const users = await getUsersFromDatabase(); // Simula consulta ao banco de dadosreturn NextResponse.json(users);
}

// Tratando requisição POSTexport async function POST(request: Request) {
  const { name } = await request.json();
  const newUser = await addUserToDatabase(name); // Simula adição ao banco de dadosreturn NextResponse.json(newUser, { status: 201 });
}

Neste exemplo, a rota /api/users responde a requisições GET e POST , permitindo que você busque uma lista de usuários ou adicione novos usuários ao banco de dados, respectivamente.

Suporte a Diferentes Métodos HTTP

Os Route Handlers suportam uma variedade de métodos HTTP, como GET, POST, PUT, DELETE, entre outros. Para cada método, você pode definir uma função exportada que lida com a lógica correspondente.

• GET : Usado para buscar ou listar dados.
• POST : Usado para criar novos recursos ou enviar dados para o servidor.
• PUT : Usado para atualizar dados existentes.
• DELETE : Usado para excluir recursos.

Respostas com NextResponse

Ao lidar com respostas HTTP, o Next.js oferece o objeto NextResponse, que facilita a construção de respostas para o cliente. Ele permite o retorno de dados JSON, a definição de status HTTP, cabeçalhos e outras informações importantes.

Exemplo de resposta personalizada com NextResponse :

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello, world!' }, { status: 200 });
}

Vantagens dos Route Handlers

1. API Embutida : Facilita a criação de APIs RESTful sem a necessidade de criar um backend separado.
2. Roteamento Automático : As rotas são automaticamente geradas com base na estrutura de arquivos.
3. Suporte a Métodos HTTP : Permite uma fácil definição de handlers para diferentes tipos de requisições HTTP.
4. Integração com o Next.js : O manuseio de requisições e respostas é completamente integrado ao framework, reduzindo a necessidade de bibliotecas adicionais.

Casos de Uso para Route Handlers

• CRUD de Recursos : Criar, ler, atualizar e excluir recursos diretamente no servidor usando diferentes métodos HTTP.
• Integração com Bancos de Dados : Consultar ou modificar dados em um banco de dados a partir de uma rota de API.
• Integração com APIs Externas : Atuar como um proxy para APIs de terceiros, transformando dados antes de enviá-los ao frontend.
• Autenticação e Autorização : Verificar credenciais e emitir tokens diretamente no servidor.

Server Actions vs. Route Handlers: Quando Usar Cada Um?

Embora ambos os recursos ofereçam maneiras de executar lógica de servidor no Next.js, eles têm usos distintos e complementares:

• Server Actions são mais adequadas quando você precisa executar lógica de backend a partir de um componente React e deseja evitar a complexidade de uma chamada HTTP ou a criação de uma API. Elas são ideais para cenários de CRUD simples onde você quer manter a lógica de comunicação simples e focada.

• Route Handlers são usados quando você precisa de uma API REST completa, acessível de fora da aplicação (por exemplo, para clientes móveis ou outros serviços). Eles permitem maior controle sobre os métodos HTTP e são uma solução poderosa para criar endpoints que podem ser usados por várias interfaces.

Conclusão

As Server Actions e os Route Handlers são dois recursos importantes no arsenal do Next.js para permitir que os desenvolvedores criem aplicações full-stack modernas com facilidade. As Server Actions oferecem uma abordagem direta para manipulação