Middleware e proteção de rotas
Um grupo (dashboard) organiza o layout de rotas autenticadas — mas nada nele impede alguém de acessar a URL direto sem sessão.
Na lição sobre grupos de rota, um grupo como (dashboard) organiza o layout de telas autenticadas — mas isso é só organização visual. Nada nesse grupo impede alguém de digitar /relatorios direto na barra de endereço sem estar logado. Checar sessão de verdade é outro problema, e o Next.js resolve isso com middleware.ts.
middleware.ts — roda antes da rota renderizar
Um arquivo middleware.ts na raiz do projeto exporta uma função que intercepta requisições antes de qualquer page.tsx renderizar. Ele pode deixar a requisição seguir, redirecionar, ou reescrever a URL.
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
const token = request.cookies.get("session")?.value;
if (!token) {
return NextResponse.redirect(new URL("/login", request.url));
}
return NextResponse.next(); // segue normalmente pra rota pedida
}Checando sessão antes de renderizar
O exemplo acima só verifica se o cookie session existe — uma checagem rápida, sem consultar banco de dados. Isso é proposital: o middleware do Next.js roda no Edge Runtime por padrão, um ambiente mais restrito que o Node.js completo, então validações pesadas (decodificar um JWT complexo, bater num banco relacional) costumam ficar melhor no próprio layout ou página protegida, depois que o middleware já barrou o caso óbvio de "nem tem cookie nenhum".
config.matcher — só rodar onde importa
Sem um matcher, o middleware roda em toda requisição — inclusive pedidos de imagem, fonte, arquivo estático. O config.matcher limita isso às rotas que de fato precisam da checagem.
export const config = {
matcher: ["/dashboard/:path*", "/relatorios/:path*"],
};Exercício
Escreva um middleware.ts que protege qualquer rota abaixo de /dashboard, redirecionando pra /login quando não existir um cookie chamado token.