M

MLOG

Português

Explore as Rotas de API do Next.js e desbloqueie capacidades de desenvolvimento full-stack em suas aplicações React. Aprenda padrões, melhores práticas e estratégias de implantação.

Rotas de API do Next.js: Padrões de Desenvolvimento Full-Stack

O Next.js revolucionou o desenvolvimento com React ao fornecer um framework robusto para construir aplicações web performáticas e escaláveis. Uma de suas principais características são as Rotas de API (API Routes), que permitem aos desenvolvedores criar funcionalidades de backend diretamente em seus projetos Next.js. Essa abordagem agiliza o desenvolvimento, simplifica a implantação e desbloqueia poderosas capacidades full-stack.

O que são as Rotas de API do Next.js?

As Rotas de API do Next.js são funções serverless escritas diretamente no seu diretório /pages/api. Cada arquivo neste diretório se torna um endpoint de API, roteando automaticamente requisições HTTP para sua função correspondente. Isso elimina a necessidade de um servidor backend separado, simplificando a arquitetura da sua aplicação e reduzindo a sobrecarga operacional.

Pense nelas como funções serverless em miniatura que vivem dentro da sua aplicação Next.js. Elas respondem a requisições HTTP como GET, POST, PUT, DELETE e podem interagir com bancos de dados, APIs externas e outros recursos do lado do servidor. Crucialmente, elas rodam apenas no servidor, não no navegador do usuário, garantindo a segurança de dados sensíveis como chaves de API.

Principais Benefícios das Rotas de API

Começando com as Rotas de API

Criar uma rota de API no Next.js é simples. Basta criar um novo arquivo dentro do diretório /pages/api. O nome do arquivo determinará o caminho da rota. Por exemplo, criar um arquivo chamado /pages/api/hello.js criará um endpoint de API acessível em /api/hello.

Exemplo: Uma API Simples de Saudação

Aqui está um exemplo básico de uma rota de API que retorna uma resposta JSON:


// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Olá da Rota de API do Next.js!' });
}

Este código define uma função handler assíncrona que recebe dois argumentos:

A função define o código de status HTTP para 200 (OK) e retorna uma resposta JSON com uma mensagem.

Lidando com Diferentes Métodos HTTP

Você pode lidar com diferentes métodos HTTP (GET, POST, PUT, DELETE, etc.) dentro da sua rota de API verificando a propriedade req.method. Isso permite que você crie APIs RESTful com facilidade.


// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // Busca todos os 'todos' do banco de dados
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // Cria um novo 'todo'
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // Lida com métodos não suportados
    res.status(405).json({ message: 'Método Não Permitido' });
  }
}

Este exemplo demonstra como lidar com requisições GET e POST para um endpoint hipotético /api/todos. Ele também inclui tratamento de erros para métodos não suportados.

Padrões de Desenvolvimento Full-Stack com Rotas de API

As Rotas de API do Next.js habilitam vários padrões de desenvolvimento full-stack. Aqui estão alguns casos de uso comuns:

1. Busca e Manipulação de Dados

As Rotas de API podem ser usadas para buscar dados de bancos de dados, APIs externas ou outras fontes de dados. Elas também podem ser usadas para manipular dados, como criar, atualizar ou deletar registros.

Exemplo: Buscando Dados de Usuário de um Banco de Dados


// pages/api/users/[id].js
import { query } from '../../../lib/db';

export default async function handler(req, res) {
  const { id } = req.query;

  try {
    const results = await query(
      'SELECT * FROM users WHERE id = ?',
      [id]
    );

    if (results.length === 0) {
      return res.status(404).json({ message: 'Usuário não encontrado' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Erro Interno do Servidor' });
  }
}

Este exemplo busca dados de um usuário de um banco de dados com base no ID do usuário fornecido na URL. Ele usa uma biblioteca de consulta de banco de dados (assumida estar em lib/db) para interagir com o banco de dados. Note o uso de consultas parametrizadas para prevenir vulnerabilidades de injeção de SQL.

2. Autenticação e Autorização

As Rotas de API podem ser usadas para implementar lógicas de autenticação e autorização. Você pode usá-las para verificar credenciais de usuário, gerar tokens JWT e proteger recursos sensíveis.

Exemplo: Autenticação de Usuário


// pages/api/login.js
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import { query } from '../../lib/db';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    try {
      const results = await query(
        'SELECT * FROM users WHERE email = ?',
        [email]
      );

      if (results.length === 0) {
        return res.status(401).json({ message: 'Credenciais inválidas' });
      }

      const user = results[0];

      const passwordMatch = await bcrypt.compare(password, user.password);

      if (!passwordMatch) {
        return res.status(401).json({ message: 'Credenciais inválidas' });
      }

      const token = jwt.sign(
        { userId: user.id, email: user.email },
        process.env.JWT_SECRET,
        { expiresIn: '1h' }
      );

      res.status(200).json({ token });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Erro Interno do Servidor' });
    }
  } else {
    res.status(405).json({ message: 'Método Não Permitido' });
  }
}

Este exemplo autentica usuários comparando a senha fornecida com a senha em hash armazenada no banco de dados. Se as credenciais forem válidas, ele gera um token JWT e o retorna para o cliente. O cliente pode então usar este token para autenticar requisições subsequentes.

3. Manipulação de Formulários e Envio de Dados

As Rotas de API podem ser usadas para lidar com o envio de formulários e processar dados enviados pelo cliente. Isso é útil para criar formulários de contato, formulários de registro e outros elementos interativos.

Exemplo: Envio de Formulário de Contato


// pages/api/contact.js
import { sendEmail } from '../../lib/email';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    try {
      await sendEmail({
        to: 'admin@example.com',
        subject: 'Novo Envio de Formulário de Contato',
        text: `Nome: ${name}\nEmail: ${email}\nMensagem: ${message}`,
      });

      res.status(200).json({ message: 'Email enviado com sucesso' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Falha ao enviar email' });
    }
  } else {
    res.status(405).json({ message: 'Método Não Permitido' });
  }
}

Este exemplo lida com o envio de um formulário de contato enviando um email para o administrador. Ele usa uma biblioteca de envio de email (assumida estar em lib/email) para enviar o email. Você deve substituir admin@example.com pelo endereço de email real do destinatário.

4. Webhooks e Manipulação de Eventos

As Rotas de API podem ser usadas para lidar com webhooks e responder a eventos de serviços externos. Isso permite que você integre sua aplicação Next.js com outras plataformas e automatize tarefas.

Exemplo: Lidando com um Webhook do Stripe


// pages/api/stripe-webhook.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export const config = {
  api: {
    bodyParser: false, // Desabilita o parsing de corpo padrão
  },
};

async function buffer(req) {
  const chunks = [];
  for await (const chunk of req) {
    chunks.push(chunk);
  }
  return Buffer.concat(chunks).toString();
}

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const sig = req.headers['stripe-signature'];

    let event;

    try {
      const buf = await buffer(req);
      event = stripe.webhooks.constructEvent(buf, sig, process.env.STRIPE_WEBHOOK_SECRET);
    } catch (err) {
      console.log(`Erro no Webhook: ${err.message}`);
      res.status(400).send(`Erro no Webhook: ${err.message}`);
      return;
    }

    // Lida com o evento
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`PaymentIntent de ${paymentIntent.amount} foi bem-sucedido!`);
        // Então defina e chame um método para lidar com o payment intent bem-sucedido.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // Então defina e chame um método para lidar com a anexação bem-sucedida de um PaymentMethod.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      default:
        // Tipo de evento inesperado
        console.log(`Tipo de evento não tratado ${event.type}.`);
    }

    // Retorna uma resposta 200 para confirmar o recebimento do evento
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Método Não Permitido');
  }
}

Este exemplo lida com um webhook do Stripe verificando a assinatura e processando os dados do evento. Ele desabilita o parser de corpo padrão e usa uma função de buffer personalizada para ler o corpo bruto da requisição. É crucial desabilitar o parser de corpo padrão porque o Stripe requer o corpo bruto para a verificação da assinatura. Lembre-se de configurar seu endpoint de webhook do Stripe no seu painel do Stripe e definir a variável de ambiente STRIPE_WEBHOOK_SECRET.

Melhores Práticas para Rotas de API

Para garantir a qualidade e a manutenibilidade de suas Rotas de API, siga estas melhores práticas:

1. Modularize Seu Código

Evite escrever rotas de API grandes e monolíticas. Em vez disso, divida seu código em módulos menores e reutilizáveis. Isso torna seu código mais fácil de entender, testar e manter.

2. Implemente Tratamento de Erros

Trate os erros adequadamente em suas rotas de API. Use blocos try...catch para capturar exceções e retornar respostas de erro apropriadas para o cliente. Registre os erros para ajudar na depuração e monitoramento.

3. Valide os Dados de Entrada

Sempre valide os dados de entrada do cliente para prevenir vulnerabilidades de segurança e garantir a integridade dos dados. Use bibliotecas de validação como Joi ou Yup para definir esquemas de validação e impor restrições aos dados.

4. Proteja Dados Sensíveis

Armazene dados sensíveis, como chaves de API e credenciais de banco de dados, em variáveis de ambiente. Nunca comite dados sensíveis em seu repositório de código.

5. Implemente Limitação de Taxa (Rate Limiting)

Proteja suas rotas de API contra abuso implementando limitação de taxa (rate limiting). Isso limita o número de requisições que um cliente pode fazer dentro de um determinado período de tempo. Use bibliotecas de limitação de taxa como express-rate-limit ou limiter.

6. Proteja as Chaves de API

Não exponha chaves de API diretamente no código do lado do cliente. Sempre faça proxy das requisições através de suas rotas de API para proteger suas chaves de API contra acesso não autorizado. Armazene as chaves de API de forma segura em variáveis de ambiente no seu servidor.

7. Use Variáveis de Ambiente

Evite codificar valores de configuração diretamente no seu código. Em vez disso, use variáveis de ambiente para armazenar as configurações. Isso facilita o gerenciamento da sua aplicação em diferentes ambientes (desenvolvimento, homologação, produção).

8. Registro (Logging) e Monitoramento

Implemente registro e monitoramento para acompanhar o desempenho de suas rotas de API. Registre eventos importantes, como erros, avisos e requisições bem-sucedidas. Use ferramentas de monitoramento para acompanhar métricas como latência de requisição, taxas de erro e uso de recursos. Serviços como Sentry, Datadog ou New Relic podem ser úteis.

Considerações sobre Implantação

As Rotas de API do Next.js são projetadas para serem implantadas em plataformas serverless. Opções populares de implantação incluem:

Ao implantar sua aplicação Next.js com Rotas de API, certifique-se de que suas variáveis de ambiente estejam configuradas corretamente na plataforma de implantação. Além disso, considere o tempo de "cold start" (partida a frio) das funções serverless, que pode impactar o tempo de resposta inicial de suas rotas de API. Otimizar seu código e usar técnicas como concorrência provisionada pode ajudar a mitigar problemas de cold start.

Conclusão

As Rotas de API do Next.js fornecem uma maneira poderosa e conveniente de construir aplicações full-stack com React. Ao aproveitar as funções serverless, você pode simplificar o desenvolvimento, reduzir a sobrecarga operacional e melhorar o desempenho da aplicação. Seguindo as melhores práticas descritas neste artigo, você pode criar Rotas de API robustas e de fácil manutenção que potencializam suas aplicações Next.js.

Seja construindo um simples formulário de contato ou uma complexa plataforma de e-commerce, as Rotas de API do Next.js podem ajudá-lo a otimizar seu processo de desenvolvimento e entregar experiências de usuário excepcionais.

Leitura Adicional

Rotas de API do Next.js: Padrões de Desenvolvimento Full-Stack | MLOG