Aprenda / Frontend — Tailwind & Next.js

IntermediárioAula 16 de 2015 min0% da trilha

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.

middleware.ts
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.

middleware.ts — limitando o escopo
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.

Quiz rápido

Quando o middleware.ts roda em relação à renderização da página?
Pra que serve o config.matcher num middleware.ts?