O middleware no Next.js é uma das ferramentas mais poderosas à disposição de desenvolvedores para criar uma aplicação robusta e personalizada. Ele oferece uma maneira flexível e eficiente de interceptar solicitações do servidor, controlar o fluxo de requisições e otimizar recursos globalmente, como autenticação, cabeçalhos, redirecionamentos e persistência de cookies. Este artigo explora como configurar e utilizar middleware no Next.js para garantir que seu aplicativo atenda às necessidades específicas de sua aplicação e seus usuários.
O que é Middleware no Next.js?
O middleware é uma camada intermediária que atua entre a solicitação do cliente e a resposta do servidor. Isso significa que ele intercepta as requisições HTTP antes que elas cheguem às rotas da aplicação, permitindo a aplicação de lógicas personalizadas e transformações.
Com o middleware, é possível realizar operações fundamentais para a segurança, desempenho e personalização da experiência do usuário, como:
- Redirecionamento condicional: Reescreva ou redirecione URLs com base em regras de negócios.
- SEO e experiência do usuário: Reescreva URLs para melhorar o SEO ou simplificar o fluxo de navegação.
- Autenticação e autorização: Aplique verificação de permissões ou autenticação global antes que o usuário acesse rotas protegidas.
- Definição de cabeçalhos personalizados: Configure cabeçalhos para aumentar a segurança, como bloqueio de scripts externos ou restrição de CORS.
- Persistência de cookies e sessão: Mantenha estados do usuário entre as solicitações para melhorar a experiência de navegação.
Além de ajudar na manutenção da lógica de negócios centralizada, o middleware torna o aplicativo mais escalável e fácil de manter ao isolar responsabilidades críticas.
Criando Middleware no Next.js
Para utilizar o middleware no Next.js, você deve começar criando um arquivo específico chamado middleware.js ou middleware.ts (caso use TypeScript) na raiz ou na pasta src do seu projeto. O middleware age em todas as páginas da aplicação ou em rotas específicas, dependendo da sua configuração.
Exemplo Básico
Vamos criar um exemplo simples de middleware que redireciona usuários não autenticados para uma página de login.
middleware.js:
import { NextResponse } from 'next/server';
// Definir URLs que requerem autenticação
const protectedRoutes = ['/dashboard', '/account'];
export function middleware(req) {
const url = req.nextUrl.clone();
const token = req.cookies.get('auth-token'); // Recupera o token de autenticação do cookie
// Se a URL faz parte das rotas protegidas e não há token de autenticação
if (protectedRoutes.includes(url.pathname) && !token) {
url.pathname = '/login'; // Redireciona para a página de login
return NextResponse.redirect(url); // Redireciona o usuário
}
// Caso contrário, segue com a solicitação normalmente
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard', '/account'], // Aplica o middleware apenas nessas rotas
};
O que está acontecendo no exemplo?
-
Interceptação: O middleware intercepta as solicitações feitas às rotas protegidas (
/dashboard,/account). - Verificação de autenticação: O middleware verifica se há um cookie com o token de autenticação.
-
Redirecionamento: Se o usuário tentar acessar uma rota protegida sem estar autenticado, ele é redirecionado para
/login.
Personalizando a Lógica de Middleware
O middleware no Next.js oferece muita flexibilidade e permite que você adicione mais funcionalidades. Aqui estão algumas práticas comuns:
1. Redirecionamento Dinâmico
Você pode redirecionar usuários para diferentes páginas com base em informações no cabeçalho HTTP, localização geográfica ou permissões de usuário.
Exemplo:
export function middleware(req) {
const { pathname, searchParams } = req.nextUrl;
// Redirecionar visitantes da UE para uma página específica
if (req.geo?.region === 'EU' && pathname === '/terms') {
req.nextUrl.pathname = '/terms-eu';
return NextResponse.redirect(req.nextUrl);
}
return NextResponse.next();
}
2. Aplicar Cabeçalhos de Segurança
Você pode adicionar cabeçalhos personalizados para melhorar a segurança da aplicação, como restrição de CORS ou bloqueio de scripts maliciosos.
Exemplo:
export function middleware(req) {
const res = NextResponse.next();
// Definir um cabeçalho de segurança personalizado
res.headers.set('X-Content-Type-Options', 'nosniff');
res.headers.set('X-Frame-Options', 'DENY');
return res;
}
3. Reescrever URLs
Ao reescrever URLs com middleware, você pode modificar o caminho da solicitação sem alterar o conteúdo visível para o usuário, o que é útil para otimizar o SEO ou lidar com roteamentos complexos.
Exemplo:
export function middleware(req) {
const url = req.nextUrl.clone();
// Reescrever todas as solicitações para /blog para /news, sem redirecionamento visível
if (url.pathname.startsWith('/blog')) {
url.pathname = url.pathname.replace('/blog', '/news');
return NextResponse.rewrite(url);
}
return NextResponse.next();
}
Considerações Avançadas para Middleware
Desempenho
O middleware é executado antes de a página ser renderizada, o que significa que você deve ser cuidadoso com operações de alto custo (como chamadas de banco de dados ou serviços externos). Para evitar impactos de performance, mantenha a lógica do middleware o mais simples possível e faça caching de informações sempre que viável.
Segurança
Embora o middleware possa melhorar a segurança ao restringir o acesso e adicionar cabeçalhos, lembre-se de que a lógica do lado do cliente também precisa ser segura. O middleware sozinho não substitui práticas essenciais como a validação de entrada e a proteção contra CSRF.
Persistência de Estado
Ao manipular cookies e sessões com middleware, certifique-se de configurar corretamente os cookies de autenticação para serem seguros, HttpOnly, e com a flag SameSite, a fim de evitar ataques como XSS e CSRF.
Conclusão
O middleware no Next.js oferece uma maneira poderosa de gerenciar o fluxo de solicitações e adicionar lógica personalizada em nível global. Ele é ideal para implementar segurança, lógica de autenticação, reescritas de URL e outras funcionalidades críticas que exigem interceptação das requisições HTTP.
Utilizando middleware, você pode criar uma aplicação Next.js mais segura, flexível e de fácil manutenção, garantindo uma experiência de usuário fluida e protegida. Ao implementar essas práticas, seu aplicativo estará preparado para escalar e lidar com fluxos de trabalho mais complexos, mantendo a clareza e a eficiência no código.
