M

MLOG

Nederlands

Ontdek Next.js Edge Config: een krachtige oplossing voor het wereldwijd distribueren van configuratie met snelheid en efficiëntie. Leer hoe u uw applicatie kunt optimaliseren met dynamische configuratie op de edge.

Next.js Edge Config: Wereldwijde Configuratieverspreiding Eenvoudig Gemaakt

In het snelle webontwikkelingslandschap van vandaag is het leveren van gepersonaliseerde en dynamische ervaringen aan gebruikers wereldwijd cruciaal. Next.js, een populair React-framework, biedt een robuuste oplossing voor het bouwen van performante en schaalbare webapplicaties. Een van de belangrijkste functies is Edge Config, een krachtig hulpmiddel voor het beheren en distribueren van configuratie wereldwijd op de edge. Deze blogpost biedt een uitgebreide gids voor het begrijpen en gebruiken van Next.js Edge Config om de prestaties van uw applicatie te optimaliseren en op maat gemaakte ervaringen te leveren aan uw wereldwijde publiek.

Wat is Next.js Edge Config?

Next.js Edge Config is een wereldwijd gedistribueerde key-value store met lage latentie, speciaal ontworpen voor het leveren van configuratiegegevens aan Next.js Edge Functions. In tegenstelling tot traditionele databases of API's, is Edge Config geoptimaliseerd voor snelheid en efficiëntie, waardoor u configuratiegegevens binnen milliseconden kunt ophalen, waar ook ter wereld. Dit stelt u in staat om het gedrag van uw applicatie dynamisch aan te passen op basis van configuratiewaarden, zonder in te boeten aan prestaties.

Zie het als een wereldwijd gerepliceerd JSON-bestand dat u ongelooflijk snel kunt bevragen vanuit Edge Functions. Dit maakt het ideaal voor:

Waarom Edge Config gebruiken?

Dit zijn de belangrijkste voordelen van het gebruik van Next.js Edge Config:

Hoe te beginnen met Edge Config

Hier is een stapsgewijze gids om te beginnen met Next.js Edge Config:

1. Projectopzet

Zorg ervoor dat u een Next.js-project hebt. Zo niet, maak er dan een aan met:

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

2. Een Edge Config aanmaken

U heeft een Vercel-account nodig om Edge Config te gebruiken. Zodra u bent ingelogd, navigeert u naar uw Vercel-project en maakt u een nieuwe Edge Config aan. Geef het een beschrijvende naam.

3. De Edge Config SDK installeren

Installeer de @vercel/edge-config SDK in uw Next.js-project:

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

4. Omgevingsvariabelen configureren

U moet de EDGE_CONFIG omgevingsvariabele configureren. U kunt de waarde van deze variabele vinden in het Vercel-dashboard voor uw Edge Config. Voeg het toe aan uw .env.local-bestand (of uw Vercel-projectinstellingen voor productie):

EDGE_CONFIG=your_edge_config_url

Belangrijk: Commit uw .env.local-bestand nooit naar uw repository. Gebruik de instellingen voor omgevingsvariabelen van Vercel voor productieomgevingen.

5. Configuratiewaarden benaderen in uw code

Nu kunt u uw Edge Config-waarden benaderen in uw Next.js-code. Hier is een voorbeeld:

// 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>Feature is enabled!</p> : <p>Feature is disabled.</p>}
    </div>
  );
}

In dit voorbeeld halen we de waarden van featureFlag en welcomeMessage op uit de Edge Config in getServerSideProps. Deze waarden worden vervolgens als props doorgegeven aan de Home-component.

6. Configuratiewaarden bijwerken

U kunt de waarden in uw Edge Config bijwerken via het Vercel-dashboard. Wijzigingen worden wereldwijd binnen milliseconden doorgevoerd.

Geavanceerde use cases en voorbeelden

A/B-testen met Edge Config

Edge Config is perfect voor A/B-testen. U kunt een configuratiewaarde definiëren die bepaalt welke versie van uw applicatie aan een gebruiker moet worden getoond. Bijvoorbeeld:

  1. Maak een Edge Config aan met een sleutel genaamd abTestGroup.
  2. Stel de waarde in op A of B.
  3. Lees in uw Edge Function de waarde van abTestGroup.
  4. Toon op basis van de waarde versie A of versie B van uw content.

Hier is een voorbeeld:

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

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

  let content;
  if (abTestGroup === 'A') {
    content = 'This is version A!';
  } else {
    content = 'This is version B!';
  }

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

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

U kunt analysetools gebruiken om de prestaties van elke versie te volgen en te bepalen welke versie beter presteert. Overweeg tools zoals Google Analytics, Amplitude of Mixpanel voor uitgebreide dataverzameling en analyse van A/B-testen.

Feature Flags met Edge Config

Met feature flags kunt u functies in- of uitschakelen zonder nieuwe code te implementeren. Dit is handig voor het testen van nieuwe functies in productie of het geleidelijk uitrollen van functies naar een subset van gebruikers. Net als bij A/B-testen kunt u de beschikbaarheid van functies regelen met een eenvoudige booleaanse vlag in uw Edge Config.

  1. Maak een Edge Config aan met een sleutel genaamd newFeatureEnabled.
  2. Stel de waarde in op true of false.
  3. Lees in uw Edge Function de waarde van newFeatureEnabled.
  4. Schakel op basis van de waarde de nieuwe functie in of uit.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>New feature is enabled!</p> : <p>New feature is disabled.</p>}
    </div>
  );
}

export default MyComponent;

Personalisatie met Edge Config

U kunt Edge Config gebruiken om content en ervaringen te personaliseren op basis van gebruikersvoorkeuren of locatie. U kunt bijvoorbeeld gebruikersvoorkeuren in een database opslaan en vervolgens Edge Config gebruiken om verschillende content te tonen op basis van die voorkeuren.

Voorbeeldscenario: Een wereldwijde e-commercesite wil productaanbevelingen weergeven op basis van het land van de gebruiker. Ze zouden een Edge Config kunnen gebruiken om landen te koppelen aan aanbevelingscategorieën.

  1. Maak een Edge Config aan met een sleutel genaamd countryToCategoryMap.
  2. Stel de waarde in op een JSON-object dat landen koppelt aan productcategorieën (bijv. {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. Lees in uw Edge Function de waarde van countryToCategoryMap.
  4. Bepaal het land van de gebruiker (bijv. op basis van hun IP-adres of een cookie).
  5. Gebruik de countryToCategoryMap om de juiste productcategorie te bepalen.
  6. Toon productaanbevelingen uit die categorie.
// 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'; // Standaard naar US
  const category = countryToCategoryMap[country] || 'General'; // Standaard naar General

  // Haal productaanbevelingen op basis van de categorie
  const products = await fetchProducts(category);

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

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

async function fetchProducts(category) {
  // Vervang dit door uw daadwerkelijke logica voor het ophalen van producten
  return [
    { id: 1, name: `Product 1 (${category})` },
    { id: 2, name: `Product 2 (${category})` },
  ];
}

Dit voorbeeld gebruikt de x-vercel-ip-country-header om het land van de gebruiker te bepalen. Deze header wordt automatisch toegevoegd door Vercel. Het is belangrijk op te merken dat het uitsluitend vertrouwen op op IP-gebaseerde geolocatie mogelijk niet altijd accuraat is. Overweeg andere methoden te gebruiken, zoals door de gebruiker verstrekte locatie of meer geavanceerde geolocatiediensten voor een betere nauwkeurigheid.

Geografische routering met Edge Config

U kunt gebruikers naar verschillende bronnen routeren op basis van hun locatie met behulp van Edge Config. Dit is handig voor het leveren van gelokaliseerde content of het voldoen aan regionale regelgeving.

  1. Maak een Edge Config aan met een sleutel genaamd countryToRedirectMap.
  2. Stel de waarde in op een JSON-object dat landen koppelt aan URL's (bijv. {"CN": "/china", "DE": "/germany"}).
  3. Lees in uw Edge Function de waarde van countryToRedirectMap.
  4. Bepaal het land van de gebruiker (bijv. op basis van hun IP-adres).
  5. Stuur de gebruiker door naar de juiste URL.
// 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'; // Standaard naar US
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Dit voorbeeld gebruikt de eigenschap req.geo.country, die automatisch wordt ingevuld door het Edge Network van Vercel met de landcode van de gebruiker. Dit is een schonere en betrouwbaardere aanpak dan het direct parsen van de x-vercel-ip-country-header. De middleware-functie controleert of er een omleidings-URL is gedefinieerd voor het land van de gebruiker in de Edge Config. Zo ja, dan wordt de gebruiker doorgestuurd naar die URL. Anders wordt de verwerking van het verzoek voortgezet.

Rate Limiting met Edge Config

Hoewel Edge Config niet is ontworpen als een volwaardige oplossing voor rate limiting, kunt u het in combinatie met andere technieken gebruiken om basis rate limiting te implementeren. Het idee is om rate limiting-parameters (bijv. verzoeken per minuut) op te slaan in Edge Config en die parameters vervolgens te gebruiken in uw Edge Functions om snelheidslimieten af te dwingen.

Belangrijke opmerking: Deze aanpak is geschikt voor eenvoudige rate limiting-scenario's. Voor robuustere rate limiting kunt u speciale rate limiting-diensten of middleware overwegen.

  1. Maak een Edge Config aan met sleutels zoals requestsPerMinute en blockedIps.
  2. Stel de requestsPerMinute-waarde in op de gewenste snelheidslimiet.
  3. Stel de blockedIps-waarde in op een array van IP-adressen die moeten worden geblokkeerd.
  4. Lees in uw Edge Function de waarden van requestsPerMinute en blockedIps.
  5. Controleer of het IP-adres van de gebruiker in de blockedIps-array staat. Zo ja, blokkeer het verzoek.
  6. Gebruik een cachingmechanisme (bijv. Redis of Vercel's Edge Cache) om het aantal verzoeken van elk IP-adres binnen de laatste minuut bij te houden.
  7. Als het aantal verzoeken van het IP-adres van de gebruiker de requestsPerMinute-limiet overschrijdt, blokkeer dan het verzoek.

Voorbeeld (Illustratief - Vereist aanvullende implementatie voor caching):

// 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; // Haal IP van gebruiker op

  // Controleer of IP is geblokkeerd
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Implementeer het tellen van verzoeken en caching (bijv. met Redis of Vercel Edge Cache)
  // Voorbeeld (Conceptueel):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Uw beschermde route-logica hier
  res.status(200).send('Protected route accessed successfully!');
}

Belangrijke overwegingen voor Rate Limiting:

Best Practices voor het gebruik van Edge Config

Alternatieven voor Edge Config

Hoewel Edge Config een krachtig hulpmiddel is, is het niet altijd de beste oplossing voor elke use case. Hier zijn enkele alternatieven om te overwegen:

Conclusie

Next.js Edge Config is een krachtig hulpmiddel voor het beheren en distribueren van configuratie wereldwijd op de edge. Door gebruik te maken van Edge Config kunt u de prestaties van uw applicatie optimaliseren, gepersonaliseerde ervaringen leveren en uw configuratiebeheerworkflow vereenvoudigen. Of u nu een wereldwijde e-commercesite, een social media-platform of een ander type webapplicatie bouwt, Edge Config kan u helpen een snelle en boeiende ervaring te bieden aan uw gebruikers wereldwijd. Verken de mogelijkheden en integreer Edge Config vandaag nog in uw Next.js-projecten om het potentieel ervan te ontsluiten!