M

MLOG

Português

Explore o Next.js Edge Config: uma solução poderosa para distribuir configurações globalmente com velocidade e eficiência. Aprenda a otimizar sua aplicação com configuração dinâmica na edge.

Next.js Edge Config: Distribuição de Configuração Global Facilitada

No cenário atual de desenvolvimento web acelerado, entregar experiências personalizadas e dinâmicas para usuários em todo o mundo é crucial. O Next.js, um framework React popular, oferece uma solução robusta para construir aplicações web performáticas e escaláveis. Uma de suas principais características é o Edge Config, uma ferramenta poderosa para gerenciar e distribuir configurações globalmente na edge. Este post de blog oferece um guia completo para entender e utilizar o Next.js Edge Config para otimizar o desempenho da sua aplicação e entregar experiências personalizadas para sua audiência global.

O que é o Next.js Edge Config?

O Next.js Edge Config é um armazenamento de chave-valor de baixa latência e distribuído globalmente, projetado especificamente para servir dados de configuração para as Edge Functions do Next.js. Diferente de bancos de dados ou APIs tradicionais, o Edge Config é otimizado para velocidade e eficiência, permitindo que você acesse dados de configuração em milissegundos de qualquer lugar do mundo. Isso permite que você ajuste dinamicamente o comportamento da sua aplicação com base em valores de configuração, sem sacrificar o desempenho.

Pense nele como um arquivo JSON replicado globalmente que você pode consultar incrivelmente rápido a partir das Edge Functions. Isso o torna ideal para:

Por que usar o Edge Config?

Aqui estão os principais benefícios de usar o Next.js Edge Config:

Como Começar com o Edge Config

Aqui está um guia passo a passo para começar com o Next.js Edge Config:

1. Configuração do Projeto

Certifique-se de que você tem um projeto Next.js. Se não, crie um usando:

npx create-next-app@latest my-app
cd my-app

2. Crie um Edge Config

Você precisará de uma conta Vercel para usar o Edge Config. Uma vez logado, navegue até o seu projeto Vercel e crie um novo Edge Config. Dê a ele um nome descritivo.

3. Instale o SDK do Edge Config

Instale o SDK @vercel/edge-config no seu projeto Next.js:

npm install @vercel/edge-config
# ou
yarn add @vercel/edge-config
# ou
pnpm install @vercel/edge-config

4. Configure as Variáveis de Ambiente

Você precisará configurar a variável de ambiente EDGE_CONFIG. Você pode encontrar o valor desta variável no painel da Vercel para o seu Edge Config. Adicione-o ao seu arquivo .env.local (ou às configurações do seu projeto Vercel para produção):

EDGE_CONFIG=your_edge_config_url

Importante: Nunca envie seu arquivo .env.local para o seu repositório. Use as configurações de variáveis de ambiente da Vercel para ambientes de produção.

5. Acessando Valores de Configuração no seu Código

Agora você pode acessar os valores do seu Edge Config no seu código Next.js. Aqui está um exemplo:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>A funcionalidade está ativada!</p> : <p>A funcionalidade está desativada.</p>}
    </div>
  );
}

Neste exemplo, estamos buscando os valores de featureFlag e welcomeMessage do Edge Config em getServerSideProps. Esses valores são então passados como props para o componente Home.

6. Atualizando Valores de Configuração

Você pode atualizar os valores no seu Edge Config através do painel da Vercel. As alterações são propagadas globalmente em milissegundos.

Casos de Uso Avançados e Exemplos

Testes A/B com Edge Config

O Edge Config é perfeito para testes A/B. Você pode definir um valor de configuração que determina qual versão da sua aplicação servir a um usuário. Por exemplo:

  1. Crie um Edge Config com uma chave chamada abTestGroup.
  2. Defina o valor como A ou B.
  3. Na sua Edge Function, leia o valor de abTestGroup.
  4. Com base no valor, sirva a versão A ou a versão B do seu conteúdo.

Aqui está um exemplo:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = 'Esta é a versão A!';
  } else {
    content = 'Esta é a versão B!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>Teste A/B</h1>
      <p>{content}</p>
    </div>
  );
}

Você pode usar ferramentas de análise para acompanhar o desempenho de cada versão e determinar qual delas tem melhor desempenho. Considere ferramentas como Google Analytics, Amplitude ou Mixpanel para coleta e análise abrangente de dados de testes A/B.

Feature Flags com Edge Config

As feature flags permitem que você ative ou desative funcionalidades sem implantar novo código. Isso é útil para testar novas funcionalidades em produção ou lançar funcionalidades gradualmente para um subconjunto de usuários. Semelhante aos testes A/B, você pode controlar a disponibilidade de uma funcionalidade com uma simples flag booleana no seu Edge Config.

  1. Crie um Edge Config com uma chave chamada newFeatureEnabled.
  2. Defina o valor como true ou false.
  3. Na sua Edge Function, leia o valor de newFeatureEnabled.
  4. Com base no valor, ative ou desative a nova funcionalidade.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>Nova funcionalidade está ativada!</p> : <p>Nova funcionalidade está desativada.</p>}
    </div>
  );
}

export default MyComponent;

Personalização com Edge Config

Você pode usar o Edge Config para personalizar conteúdo e experiências com base nas preferências ou localização do usuário. Por exemplo, você pode armazenar as preferências do usuário em um banco de dados e depois usar o Edge Config para servir conteúdo diferente com base nessas preferências.

Cenário de Exemplo: Um site de e-commerce global quer exibir recomendações de produtos com base no país do usuário. Eles poderiam usar um Edge Config para mapear países a categorias de recomendação.

  1. Crie um Edge Config com uma chave chamada countryToCategoryMap.
  2. Defina o valor como um objeto JSON que mapeia países a categorias de produtos (ex.: {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. Na sua Edge Function, leia o valor de countryToCategoryMap.
  4. Determine o país do usuário (ex.: a partir do endereço IP ou de um cookie).
  5. Use o countryToCategoryMap para determinar a categoria de produto apropriada.
  6. Exiba recomendações de produtos dessa categoria.
// pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // Padrão para US
  const category = countryToCategoryMap[country] || 'General'; // Padrão para General

  // Busque recomendações de produtos com base na categoria
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Recomendações de Produtos</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Substitua pela sua lógica real de busca de produtos
  return [
    { id: 1, name: `Produto 1 (${category})` },
    { id: 2, name: `Produto 2 (${category})` },
  ];
}

Este exemplo usa o cabeçalho x-vercel-ip-country para determinar o país do usuário. Este cabeçalho é adicionado automaticamente pela Vercel. É importante notar que depender apenas da geolocalização baseada em IP pode nem sempre ser preciso. Considere usar outros métodos, como a localização fornecida pelo usuário ou serviços de geolocalização mais sofisticados para maior precisão.

Roteamento Geográfico com Edge Config

Você pode rotear usuários para diferentes recursos com base em sua localização usando o Edge Config. Isso é útil para servir conteúdo localizado ou para cumprir regulamentações regionais.

  1. Crie um Edge Config com uma chave chamada countryToRedirectMap.
  2. Defina o valor como um objeto JSON que mapeia países a URLs (ex.: {"CN": "/china", "DE": "/germany"}).
  3. Na sua Edge Function, leia o valor de countryToRedirectMap.
  4. Determine o país do usuário (ex.: a partir do seu endereço IP).
  5. Redirecione o usuário para a URL apropriada.
// pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // Padrão para US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

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

Este exemplo usa a propriedade req.geo.country, que é preenchida automaticamente pela Edge Network da Vercel com o código do país do usuário. Esta é uma abordagem mais limpa e confiável do que analisar diretamente o cabeçalho x-vercel-ip-country. A função de middleware verifica se há uma URL de redirecionamento definida para o país do usuário no Edge Config. Se houver, redireciona o usuário para essa URL. Caso contrário, continua processando a requisição.

Limitação de Taxa (Rate Limiting) com Edge Config

Embora o Edge Config não seja projetado para ser uma solução completa de limitação de taxa, você pode usá-lo em conjunto com outras técnicas para implementar uma limitação de taxa básica. A ideia é armazenar parâmetros de limitação de taxa (ex.: requisições por minuto) no Edge Config e, em seguida, usar esses parâmetros em suas Edge Functions para aplicar os limites.

Nota Importante: Esta abordagem é adequada para cenários simples de limitação de taxa. Para uma limitação de taxa mais robusta, considere o uso de serviços ou middleware dedicados a isso.

  1. Crie um Edge Config com chaves como requestsPerMinute e blockedIps.
  2. Defina o valor de requestsPerMinute para o limite de taxa desejado.
  3. Defina o valor de blockedIps como um array de endereços IP que devem ser bloqueados.
  4. Na sua Edge Function, leia os valores de requestsPerMinute e blockedIps.
  5. Verifique se o endereço IP do usuário está no array blockedIps. Se estiver, bloqueie a requisição.
  6. Use um mecanismo de cache (ex.: Redis ou Vercel's Edge Cache) para rastrear o número de requisições de cada endereço IP no último minuto.
  7. Se o número de requisições do endereço IP do usuário exceder o limite de requestsPerMinute, bloqueie a requisição.

Exemplo (Ilustrativo - Requer Implementação Adicional para Cache):

// pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Obtenha o IP do usuário

  // Verifique se o IP está bloqueado
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Implementar contagem de requisições e cache (ex.: usando Redis ou Vercel Edge Cache)
  // Exemplo (Conceitual):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Sua lógica de rota protegida aqui
  res.status(200).send('Rota protegida acessada com sucesso!');
}

Considerações Importantes para Limitação de Taxa:

Melhores Práticas para Usar o Edge Config

Alternativas ao Edge Config

Embora o Edge Config seja uma ferramenta poderosa, nem sempre é a melhor solução para todos os casos de uso. Aqui estão algumas alternativas a serem consideradas:

Conclusão

O Next.js Edge Config é uma ferramenta poderosa para gerenciar e distribuir configurações globalmente na edge. Ao aproveitar o Edge Config, você pode otimizar o desempenho da sua aplicação, entregar experiências personalizadas e simplificar seu fluxo de trabalho de gerenciamento de configuração. Seja construindo um site de e-commerce global, uma plataforma de mídia social ou qualquer outro tipo de aplicação web, o Edge Config pode ajudá-lo a entregar uma experiência rápida e envolvente para seus usuários em todo o mundo. Explore as possibilidades e integre o Edge Config em seus projetos Next.js hoje para desbloquear seu potencial!

Next.js Edge Config: Distribuição de Configuração Global Facilitada | MLOG