0Pricing
React Academy · Aula

Proteção de rotas baseada em middleware

Use o middleware do Next.js e callbacks de autenticação para redirecionar usuários não autenticados na borda.

Proteção de rotas baseada em middleware é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O que é a camada intermediária do Next.js

A camada intermediária é executada na borda antes que uma solicitação chegue a uma rota. Ela pode redirecionar, reescrever ou adicionar cabeçalhos — sendo ideal para verificações de autenticação sem carregar componentes do servidor.

Criando a camada intermediária

Crie middleware.ts na raiz do projeto. Exporte uma função middleware e uma configuração de correspondência config.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

Padrões de correspondência

A matriz matcher usa padrões de caminho. Use :path* para qualquer subcaminho ou exclua caminhos com uma antecipação negativa.

export const config = {
  matcher: [
    // Protect all routes except public ones:
    '/((?!login|register|_next|api/auth|favicon.ico).*)',
  ],
};

Integração da camada intermediária do Auth.js

O Auth.js (v5) fornece uma exportação de camada intermediária pronta para uso. Reexporte-a de middleware.ts com um comparador.

// middleware.ts
export { auth as middleware } from '@/auth';

export const config = {
  matcher: ['/dashboard/:path*', '/settings/:path*'],
};

Verificando JWT na camada intermediária

Verifique um token JWT na camada intermediária usando a biblioteca jose (compatível com a borda — sem o módulo de criptografia do Node.js).

import { jwtVerify } from 'jose';

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  try {
    await jwtVerify(token, new TextEncoder().encode(process.env.JWT_SECRET));
    return NextResponse.next();
  } catch {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

Camada intermediária baseada em funções

Leia a função do usuário a partir do token e redirecione para uma página de acesso não autorizado se a função for insuficiente.

const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
  return NextResponse.redirect(new URL('/unauthorized', request.url));
}

Passando dados para manipuladores de rota

Defina um cabeçalho de solicitação dentro da camada intermediária para passar dados de usuário decodificados aos componentes do servidor sem buscar o token novamente.

const response = NextResponse.next();
response.headers.set('x-user-id', payload.sub as string);
response.headers.set('x-user-role', payload.role as string);
return response;

// In a Server Component:
import { headers } from 'next/headers';
const userId = headers().get('x-user-id');

Reescrevendo URLs na camada intermediária

Use NextResponse.rewrite() para disponibilizar uma página diferente para uma URL sem alterar a barra de endereços do navegador — útil para testes A/B ou sinalizadores de recursos.

const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
  return NextResponse.rewrite(new URL('/home-v2', request.url));
}

Geolocalização e IP na camada intermediária

Acesse os dados geográficos da solicitação e o IP a partir do objeto NextRequest para redirecionamentos ou bloqueios baseados na região.

const country = request.geo?.country ?? 'US';
if (country === 'XX') {
  return NextResponse.redirect(new URL('/region-blocked', request.url));
}

Desempenho da camada intermediária

A camada intermediária é executada na borda para cada solicitação correspondente. Mantenha-a leve — evite cálculos pesados ou importações grandes. Use apenas bibliotecas compatíveis com a borda.

Combinando rotas autenticadas e públicas

Um padrão comum é proteger tudo, exceto uma lista de permissões de caminhos públicos específicos, verificada antes da lógica de autenticação.

const PUBLIC_PATHS = ['/login', '/register', '/about'];
const isPublic = PUBLIC_PATHS.some(p => request.nextUrl.pathname.startsWith(p));
if (isPublic) return NextResponse.next();

// Auth check for non-public routes
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));

Verificação rápida

Qual biblioteca você deve usar para verificar JWTs dentro da camada intermediária do Next.js em vez do módulo de criptografia do Node.js?

Recapitulação

Crie middleware.ts na raiz do projeto com uma configuração matcher. Verifique os tokens de autenticação com jose, compatível com a borda, redirecione usuários não autenticados e passe dados decodificados aos componentes do servidor por meio dos cabeçalhos da resposta. Mantenha a camada intermediária rápida e com poucas dependências.

Perguntas Frequentes

A aula “Proteção de rotas baseada em middleware” é grátis?

Sim — o texto completo de “Proteção de rotas baseada em middleware” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Proteção de rotas baseada em middleware”?

Use o middleware do Next.js e callbacks de autenticação para redirecionar usuários não autenticados na borda. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Proteção de rotas baseada em middleware”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configurando Auth.js no App Router do Next.js
  2. Gerenciamento de sessões e hook useSession
  3. Provedor de credenciais e login personalizado
  4. Proteção de rotas baseada em middleware
← Voltar para React Academy