M

MLOG

Français

Découvrez Next.js Edge Config : une solution puissante pour distribuer la configuration mondialement avec vitesse et efficacité. Apprenez à optimiser votre application.

Next.js Edge Config : La Distribution de Configuration Globale Simplifiée

Dans le paysage actuel du développement web qui évolue rapidement, il est crucial de fournir des expériences personnalisées et dynamiques aux utilisateurs du monde entier. Next.js, un framework React populaire, offre une solution robuste pour créer des applications web performantes et évolutives. L'une de ses fonctionnalités clés est Edge Config, un outil puissant pour gérer et distribuer la configuration à l'échelle mondiale, à la périphérie (edge). Cet article de blog fournit un guide complet pour comprendre et utiliser Next.js Edge Config afin d'optimiser les performances de votre application et d'offrir des expériences sur mesure à votre public mondial.

Qu'est-ce que Next.js Edge Config ?

Next.js Edge Config est un magasin clé-valeur distribué mondialement à faible latence, spécialement conçu pour servir des données de configuration aux Fonctions Edge de Next.js. Contrairement aux bases de données ou aux API traditionnelles, Edge Config est optimisé pour la vitesse et l'efficacité, vous permettant d'accéder aux données de configuration en quelques millisecondes depuis n'importe où dans le monde. Cela vous permet d'ajuster dynamiquement le comportement de votre application en fonction des valeurs de configuration, sans sacrifier les performances.

Imaginez-le comme un fichier JSON répliqué mondialement que vous pouvez interroger incroyablement rapidement depuis les Fonctions Edge. Cela le rend idéal pour :

Pourquoi Utiliser Edge Config ?

Voici les principaux avantages de l'utilisation de Next.js Edge Config :

Comment Démarrer avec Edge Config

Voici un guide étape par étape pour démarrer avec Next.js Edge Config :

1. Configuration du Projet

Assurez-vous d'avoir un projet Next.js. Sinon, créez-en un en utilisant :

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

2. Créer une Edge Config

Vous aurez besoin d'un compte Vercel pour utiliser Edge Config. Une fois connecté, naviguez vers votre projet Vercel et créez une nouvelle Edge Config. Donnez-lui un nom descriptif.

3. Installer le SDK Edge Config

Installez le SDK @vercel/edge-config dans votre projet Next.js :

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

4. Configurer les Variables d'Environnement

Vous devrez configurer la variable d'environnement EDGE_CONFIG. Vous pouvez trouver la valeur de cette variable dans le tableau de bord Vercel de votre Edge Config. Ajoutez-la à votre fichier .env.local (ou aux paramètres de votre projet Vercel pour la production) :

EDGE_CONFIG=votre_url_edge_config

Important : Ne committez jamais votre fichier .env.local dans votre dépôt. Utilisez les paramètres de variables d'environnement de Vercel pour les environnements de production.

5. Accéder aux Valeurs de Configuration dans Votre Code

Maintenant, vous pouvez accéder aux valeurs de votre Edge Config dans votre code Next.js. Voici un exemple :

// 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>La fonctionnalité est activée !</p> : <p>La fonctionnalité est désactivée.</p>}
    </div>
  );
}

Dans cet exemple, nous récupérons les valeurs de featureFlag et welcomeMessage depuis l'Edge Config dans getServerSideProps. Ces valeurs sont ensuite passées comme props au composant Home.

6. Mettre à Jour les Valeurs de Configuration

Vous pouvez mettre à jour les valeurs dans votre Edge Config via le tableau de bord Vercel. Les changements sont propagés mondialement en quelques millisecondes.

Cas d'Usage Avancés et Exemples

Tests A/B avec Edge Config

Edge Config est parfait pour les tests A/B. Vous pouvez définir une valeur de configuration qui détermine quelle version de votre application servir à un utilisateur. Par exemple :

  1. Créez une Edge Config avec une clé nommée abTestGroup.
  2. Définissez la valeur sur A ou B.
  3. Dans votre Fonction Edge, lisez la valeur de abTestGroup.
  4. En fonction de la valeur, servez la version A ou la version B de votre contenu.

Voici un exemple :

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

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

  let content;
  if (abTestGroup === 'A') {
    content = 'Ceci est la version A !';
  } else {
    content = 'Ceci est la version B !';
  }

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

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

Vous pouvez utiliser des outils d'analyse pour suivre les performances de chaque version et déterminer laquelle est la plus performante. Pensez à des outils comme Google Analytics, Amplitude ou Mixpanel pour une collecte et une analyse complètes des données de tests A/B.

Feature Flags avec Edge Config

Les feature flags (ou fonctionnalités à la demande) vous permettent d'activer ou de désactiver des fonctionnalités sans déployer de nouveau code. C'est utile pour tester de nouvelles fonctionnalités en production ou pour les déployer progressivement auprès d'un sous-ensemble d'utilisateurs. Similaire aux tests A/B, vous pouvez contrôler la disponibilité d'une fonctionnalité avec un simple drapeau booléen dans votre Edge Config.

  1. Créez une Edge Config avec une clé nommée newFeatureEnabled.
  2. Définissez la valeur sur true ou false.
  3. Dans votre Fonction Edge, lisez la valeur de newFeatureEnabled.
  4. En fonction de la valeur, activez ou désactivez la nouvelle fonctionnalité.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>La nouvelle fonctionnalité est activée !</p> : <p>La nouvelle fonctionnalité est désactivée.</p>}
    </div>
  );
}

export default MyComponent;

Personnalisation avec Edge Config

Vous pouvez utiliser Edge Config pour personnaliser le contenu et les expériences en fonction des préférences ou de la localisation de l'utilisateur. Par exemple, vous pouvez stocker les préférences de l'utilisateur dans une base de données, puis utiliser Edge Config pour servir différents contenus en fonction de ces préférences.

Scénario d'Exemple : Un site e-commerce mondial souhaite afficher des recommandations de produits en fonction du pays de l'utilisateur. Il pourrait utiliser une Edge Config pour mapper les pays aux catégories de recommandations.

  1. Créez une Edge Config avec une clé nommée countryToCategoryMap.
  2. Définissez la valeur sur un objet JSON qui mappe les pays aux catégories de produits (par ex., {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. Dans votre Fonction Edge, lisez la valeur de countryToCategoryMap.
  4. Déterminez le pays de l'utilisateur (par ex., à partir de son adresse IP ou d'un cookie).
  5. Utilisez le countryToCategoryMap pour déterminer la catégorie de produits appropriée.
  6. Affichez les recommandations de produits de cette catégorie.
// 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'; // Par défaut US
  const category = countryToCategoryMap[country] || 'General'; // Par défaut General

  // Récupérer les recommandations de produits basées sur la catégorie
  const products = await fetchProducts(category);

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

export default function Products({ products }) {
  return (
    <div>
      <h1>Recommandations de Produits</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Remplacez par votre logique de récupération de produits réelle
  return [
    { id: 1, name: `Produit 1 (${category})` },
    { id: 2, name: `Produit 2 (${category})` },
  ];
}

Cet exemple utilise l'en-tête x-vercel-ip-country pour déterminer le pays de l'utilisateur. Cet en-tête est automatiquement ajouté par Vercel. Il est important de noter que se fier uniquement à la géolocalisation par IP peut ne pas toujours être précis. Envisagez d'utiliser d'autres méthodes comme la localisation fournie par l'utilisateur ou des services de géolocalisation plus sophistiqués pour une meilleure précision.

Routage Géographique avec Edge Config

Vous pouvez router les utilisateurs vers différentes ressources en fonction de leur emplacement en utilisant Edge Config. C'est utile pour servir du contenu localisé ou pour se conformer aux réglementations régionales.

  1. Créez une Edge Config avec une clé nommée countryToRedirectMap.
  2. Définissez la valeur sur un objet JSON qui mappe les pays à des URL (par ex., {"CN": "/china", "DE": "/germany"}).
  3. Dans votre Fonction Edge, lisez la valeur de countryToRedirectMap.
  4. Déterminez le pays de l'utilisateur (par ex., à partir de son adresse IP).
  5. Redirigez l'utilisateur vers l'URL appropriée.
// 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'; // Par défaut US
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Cet exemple utilise la propriété req.geo.country, qui est automatiquement renseignée par le réseau Edge de Vercel avec le code de pays de l'utilisateur. C'est une approche plus propre et plus fiable que d'analyser directement l'en-tête x-vercel-ip-country. La fonction middleware vérifie s'il existe une URL de redirection définie pour le pays de l'utilisateur dans l'Edge Config. Si c'est le cas, elle redirige l'utilisateur vers cette URL. Sinon, elle continue le traitement de la requête.

Limitation de Débit (Rate Limiting) avec Edge Config

Bien que Edge Config ne soit pas conçu pour être une solution complète de limitation de débit, vous pouvez l'utiliser en conjonction avec d'autres techniques pour mettre en œuvre une limitation de base. L'idée est de stocker les paramètres de limitation de débit (par ex., requêtes par minute) dans Edge Config, puis d'utiliser ces paramètres dans vos Fonctions Edge pour appliquer les limites.

Note Importante : Cette approche convient aux scénarios de limitation de débit simples. Pour une limitation de débit plus robuste, envisagez d'utiliser des services ou des middlewares dédiés.

  1. Créez une Edge Config avec des clés comme requestsPerMinute et blockedIps.
  2. Définissez la valeur de requestsPerMinute sur la limite de débit souhaitée.
  3. Définissez la valeur de blockedIps sur un tableau d'adresses IP qui doivent être bloquées.
  4. Dans votre Fonction Edge, lisez les valeurs de requestsPerMinute et blockedIps.
  5. Vérifiez si l'adresse IP de l'utilisateur se trouve dans le tableau blockedIps. Si c'est le cas, bloquez la requête.
  6. Utilisez un mécanisme de mise en cache (par ex., Redis ou le Cache Edge de Vercel) pour suivre le nombre de requêtes de chaque adresse IP au cours de la dernière minute.
  7. Si le nombre de requêtes de l'adresse IP de l'utilisateur dépasse la limite requestsPerMinute, bloquez la requête.

Exemple (Illustratif - Nécessite une Implémentation Supplémentaire pour la Mise en 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; // Récupérer l'IP de l'utilisateur

  // Vérifier si l'IP est bloquée
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO : Implémenter le comptage des requêtes et la mise en cache (par ex., avec Redis ou Vercel Edge Cache)
  // Exemple (Conceptuel) :
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Votre logique de route protégée ici
  res.status(200).send('Route protégée accédée avec succès !');
}

Considérations Importantes pour la Limitation de Débit :

Bonnes Pratiques pour l'Utilisation d'Edge Config

Alternatives à Edge Config

Bien que Edge Config soit un outil puissant, ce n'est pas toujours la meilleure solution pour chaque cas d'utilisation. Voici quelques alternatives à considérer :

Conclusion

Next.js Edge Config est un outil puissant pour gérer et distribuer la configuration à l'échelle mondiale, à la périphérie. En tirant parti d'Edge Config, vous pouvez optimiser les performances de votre application, offrir des expériences personnalisées et simplifier votre flux de travail de gestion de la configuration. Que vous construisiez un site e-commerce mondial, une plateforme de médias sociaux ou tout autre type d'application web, Edge Config peut vous aider à offrir une expérience rapide et engageante à vos utilisateurs du monde entier. Explorez les possibilités et intégrez Edge Config dans vos projets Next.js dès aujourd'hui pour libérer son potentiel !