M

MLOG

Português

Aprenda técnicas avançadas de modificação de requisições com middleware Next.js, incluindo roteamento complexo, autenticação, testes A/B e estratégias de localização.

Casos Extremos de Middleware no Next.js: Dominando Padrões de Modificação de Requisições

O middleware do Next.js fornece um mecanismo poderoso para interceptar e modificar requisições antes que elas cheguem às rotas da sua aplicação. Essa capacidade abre um vasto leque de possibilidades, desde simples verificações de autenticação até cenários complexos de testes A/B e estratégias de internacionalização. No entanto, para aproveitar o middleware de forma eficaz, é necessário um profundo entendimento dos seus casos extremos e potenciais armadilhas. Este guia completo explora padrões avançados de modificação de requisições, fornecendo exemplos práticos e insights acionáveis para ajudá-lo a construir aplicações Next.js robustas e de alto desempenho.

Entendendo os Fundamentos do Middleware do Next.js

Antes de mergulhar nos padrões avançados, vamos recapitular os conceitos básicos do middleware do Next.js. As funções de middleware são executadas antes que uma requisição seja concluída, permitindo que você:

As funções de middleware residem no arquivo middleware.js ou middleware.ts no seu diretório /pages ou /app (dependendo da sua versão e configuração do Next.js). Elas recebem um objeto NextRequest que representa a requisição de entrada e podem retornar um objeto NextResponse para controlar o comportamento subsequente.

Exemplo: Middleware Básico de Autenticação

Este exemplo demonstra uma verificação de autenticação simples. Se o usuário não estiver autenticado (por exemplo, sem um token válido em um cookie), ele é redirecionado para a página de login.


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const authToken = request.cookies.get('authToken')

  if (!authToken) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/protected/:path*'],
}

Este middleware será executado apenas para rotas que correspondam a /protected/:path*. Ele verifica a presença de um cookie authToken. Se o cookie estiver ausente, o usuário é redirecionado para a página /login. Caso contrário, a requisição pode prosseguir normalmente usando NextResponse.next().

Padrões Avançados de Modificação de Requisições

Agora, vamos explorar alguns padrões avançados de modificação de requisições que demonstram o verdadeiro poder do middleware do Next.js.

1. Testes A/B com Cookies

Testes A/B são uma técnica crucial para otimizar a experiência do usuário. O middleware pode ser usado para atribuir aleatoriamente usuários a diferentes variações da sua aplicação e rastrear seu comportamento. Este padrão depende de cookies para manter a variante atribuída ao usuário.

Exemplo: Teste A/B de uma Landing Page


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const VARIANT_A = 'variantA'
const VARIANT_B = 'variantB'

export function middleware(request: NextRequest) {
  let variant = request.cookies.get('variant')?.value

  if (!variant) {
    // Randomly assign a variant
    variant = Math.random() < 0.5 ? VARIANT_A : VARIANT_B
    const response = NextResponse.next()
    response.cookies.set('variant', variant)
    return response
  }

  if (variant === VARIANT_A) {
    return NextResponse.rewrite(new URL('/variant-a', request.url))
  } else if (variant === VARIANT_B) {
    return NextResponse.rewrite(new URL('/variant-b', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/'],
}

Neste exemplo, quando um usuário visita o caminho raiz (/) pela primeira vez, o middleware o atribui aleatoriamente à variantA ou variantB. Essa variante é armazenada em um cookie. Requisições subsequentes do mesmo usuário serão reescritas para /variant-a ou /variant-b, dependendo da variante atribuída. Isso permite que você sirva diferentes landing pages e acompanhe qual delas tem melhor desempenho. Certifique-se de ter rotas definidas para /variant-a e /variant-b em sua aplicação Next.js.

Considerações Globais: Ao realizar testes A/B, considere as variações regionais. Um design que ressoa na América do Norte pode não ser tão eficaz na Ásia. Você pode usar dados de geolocalização (obtidos por meio de consulta de endereço IP ou preferências do usuário) para adaptar o teste A/B a regiões específicas.

2. Localização (i18n) com Reescrita de URL

A internacionalização (i18n) é essencial para alcançar um público global. O middleware pode ser usado para detectar automaticamente o idioma preferido do usuário e redirecioná-lo para a versão localizada apropriada do seu site.

Exemplo: Redirecionamento com base no cabeçalho `Accept-Language`


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const SUPPORTED_LANGUAGES = ['en', 'fr', 'es', 'de']
const DEFAULT_LANGUAGE = 'en'

function getPreferredLanguage(request: NextRequest): string {
  const acceptLanguage = request.headers.get('accept-language')
  if (!acceptLanguage) {
    return DEFAULT_LANGUAGE
  }

  const languages = acceptLanguage.split(',').map((lang) => lang.split(';')[0].trim())

  for (const lang of languages) {
    if (SUPPORTED_LANGUAGES.includes(lang)) {
      return lang
    }
  }

  return DEFAULT_LANGUAGE
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname

  // Check if there's an existing locale in the pathname
  if (
    SUPPORTED_LANGUAGES.some(
      (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
    )
  ) {
    return NextResponse.next()
  }

  const preferredLanguage = getPreferredLanguage(request)

  return NextResponse.redirect(
    new URL(`/${preferredLanguage}${pathname}`, request.url)
  )
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)'
  ],
}

Este middleware extrai o cabeçalho Accept-Language da requisição e determina o idioma preferido do usuário. Se a URL ainda não contiver um prefixo de idioma (por exemplo, /en/about), o middleware redireciona o usuário para a URL localizada apropriada (por exemplo, /fr/about para francês). Certifique-se de ter a estrutura de pastas apropriada em seu diretório `/pages` ou `/app` para as diferentes localidades. Por exemplo, você precisará de um arquivo `/pages/en/about.js` e um `/pages/fr/about.js`.

Considerações Globais: Certifique-se de que sua implementação de i18n lide corretamente com idiomas da direita para a esquerda (por exemplo, árabe, hebraico). Além disso, considere usar uma Rede de Distribuição de Conteúdo (CDN) para servir ativos localizados de servidores mais próximos dos seus usuários, melhorando o desempenho.

3. Feature Flags

Feature flags permitem habilitar ou desabilitar funcionalidades em sua aplicação sem implantar novo código. Isso é particularmente útil para lançar novas funcionalidades gradualmente ou para testar funcionalidades em produção. O middleware pode ser usado para verificar o status de uma feature flag e modificar a requisição de acordo.

Exemplo: Habilitando uma Funcionalidade Beta


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const BETA_FEATURE_ENABLED = process.env.BETA_FEATURE_ENABLED === 'true'

export function middleware(request: NextRequest) {
  if (BETA_FEATURE_ENABLED && request.nextUrl.pathname.startsWith('/new-feature')) {
    return NextResponse.next()
  }

  // Optionally redirect to a "feature unavailable" page
  return NextResponse.rewrite(new URL('/feature-unavailable', request.url))
}

export const config = {
  matcher: ['/new-feature/:path*'],
}

Este middleware verifica o valor da variável de ambiente BETA_FEATURE_ENABLED. Se estiver definida como true e o usuário estiver tentando acessar uma rota em /new-feature, a requisição pode prosseguir. Caso contrário, o usuário é redirecionado para uma página /feature-unavailable. Lembre-se de configurar as variáveis de ambiente adequadamente para diferentes ambientes (desenvolvimento, homologação, produção).

Considerações Globais: Ao usar feature flags, considere as implicações legais de habilitar funcionalidades que podem não estar em conformidade com os regulamentos de todas as regiões. Por exemplo, funcionalidades relacionadas à privacidade de dados podem precisar ser desabilitadas em determinados países.

4. Detecção de Dispositivo e Roteamento Adaptativo

Aplicações web modernas precisam ser responsivas e se adaptar a diferentes tamanhos de tela e capacidades de dispositivos. O middleware pode ser usado para detectar o tipo de dispositivo do usuário e redirecioná-lo para versões otimizadas do seu site.

Exemplo: Redirecionando Usuários Móveis para um Subdomínio Otimizado para Dispositivos Móveis


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { device } from 'detection'

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get('user-agent')

  if (userAgent) {
    const deviceType = device(userAgent)

    if (deviceType.type === 'phone') {
      const mobileUrl = new URL(request.url)
      mobileUrl.hostname = 'm.example.com'
      return NextResponse.redirect(mobileUrl)
    }
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/'],
}

Este exemplo usa a biblioteca `detection` para determinar o tipo de dispositivo do usuário com base no cabeçalho User-Agent. Se o usuário estiver em um celular, ele é redirecionado para o subdomínio m.example.com (supondo que você tenha uma versão otimizada para dispositivos móveis do seu site hospedada lá). Lembre-se de instalar o pacote `detection`: `npm install detection`.

Considerações Globais: Certifique-se de que sua lógica de detecção de dispositivos leve em conta as variações regionais no uso de dispositivos. Por exemplo, feature phones ainda são predominantes em alguns países em desenvolvimento. Considere usar uma combinação de detecção de User-Agent e técnicas de design responsivo para uma solução mais robusta.

5. Enriquecimento do Cabeçalho da Requisição

O middleware pode adicionar informações aos cabeçalhos da requisição antes que ela seja processada pelas rotas da sua aplicação. Isso é útil para adicionar metadados personalizados, como papéis de usuário, status de autenticação ou IDs de requisição, que podem ser usados pela lógica da sua aplicação.

Exemplo: Adicionando um ID de Requisição 


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { v4 as uuidv4 } from 'uuid'

export function middleware(request: NextRequest) {
  const requestId = uuidv4()
  const response = NextResponse.next()
  response.headers.set('x-request-id', requestId)
  return response
}

export const config = {
  matcher: ['/api/:path*'], // Only apply to API routes
}

Este middleware gera um ID de requisição único usando a biblioteca uuid e o adiciona ao cabeçalho x-request-id. Este ID pode então ser usado para fins de log, rastreamento e depuração. Lembre-se de instalar o pacote uuid: `npm install uuid`.

Considerações Globais: Ao adicionar cabeçalhos personalizados, esteja ciente dos limites de tamanho do cabeçalho. Exceder esses limites pode levar a erros inesperados. Além disso, garanta que qualquer informação sensível adicionada aos cabeçalhos seja devidamente protegida, especialmente se sua aplicação estiver atrás de um proxy reverso ou CDN.

6. Melhorias de Segurança: Rate Limiting

O middleware pode atuar como uma primeira linha de defesa contra ataques maliciosos implementando o rate limiting. Isso previne o abuso limitando o número de requisições que um cliente pode fazer dentro de uma janela de tempo específica.

Exemplo: Rate Limiting Básico usando um Armazenamento Simples


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const requestCounts: { [ip: string]: number } = {}
const WINDOW_SIZE_MS = 60000; // 1 minute
const MAX_REQUESTS_PER_WINDOW = 100;

export function middleware(request: NextRequest) {
  const clientIP = request.ip || '127.0.0.1' // Get client IP, default to localhost for local testing

  if (!requestCounts[clientIP]) {
    requestCounts[clientIP] = 0;
  }

  requestCounts[clientIP]++;

  if (requestCounts[clientIP] > MAX_REQUESTS_PER_WINDOW) {
    return new NextResponse(
      JSON.stringify({ message: 'Too many requests' }),
      { status: 429, headers: { 'Content-Type': 'application/json' } }
    );
  }

  // Reset count after window
  setTimeout(() => {
    requestCounts[clientIP]--;
    if (requestCounts[clientIP] <= 0) {
        delete requestCounts[clientIP];
    }
  }, WINDOW_SIZE_MS);

  return NextResponse.next();
}

export const config = {
  matcher: ['/api/:path*'], // Apply to all API routes
}

Este exemplo mantém um armazenamento simples em memória (requestCounts) para rastrear o número de requisições de cada endereço IP. Se um cliente exceder o MAX_REQUESTS_PER_WINDOW dentro do WINDOW_SIZE_MS, o middleware retorna um erro 429 Too Many Requests. Importante: Este é um exemplo simplificado e não é adequado para ambientes de produção, pois não escala e é vulnerável a ataques de negação de serviço. Para uso em produção, considere usar uma solução de rate limiting mais robusta, como Redis ou um serviço dedicado de rate limiting.

Considerações Globais: As estratégias de rate limiting devem ser adaptadas às características específicas da sua aplicação e à distribuição geográfica dos seus usuários. Considere usar limites de taxa diferentes para diferentes regiões ou segmentos de usuários.

Casos Extremos e Potenciais Armadilhas

Embora o middleware seja uma ferramenta poderosa, é essencial estar ciente de suas limitações e potenciais armadilhas:

Melhores Práticas para Usar o Middleware do Next.js

Para maximizar os benefícios do middleware do Next.js e evitar problemas potenciais, siga estas melhores práticas:

Conclusão

O middleware do Next.js oferece uma maneira poderosa de modificar requisições e personalizar o comportamento da sua aplicação na borda. Ao entender os padrões avançados de modificação de requisições discutidos neste guia, você pode construir aplicações Next.js robustas, performáticas e globalmente conscientes. Lembre-se de considerar cuidadosamente os casos extremos e as potenciais armadilhas, e siga as melhores práticas descritas acima para garantir que suas funções de middleware sejam confiáveis e de fácil manutenção. Abrace o poder do middleware para criar experiências de usuário excepcionais e desbloquear novas possibilidades para suas aplicações web.