M

MLOG

Svenska

Utforska Next.js Edge Config: en kraftfull lösning för att distribuera konfiguration globalt med snabbhet och effektivitet. Lär dig optimera din applikation med dynamisk konfiguration på edge.

Next.js Edge Config: Global konfigurationsdistribution på ett enkelt sätt

I dagens snabbrörliga landskap för webbutveckling är det avgörande att leverera personliga och dynamiska upplevelser till användare över hela världen. Next.js, ett populärt React-ramverk, erbjuder en robust lösning för att bygga högpresterande och skalbara webbapplikationer. En av dess nyckelfunktioner är Edge Config, ett kraftfullt verktyg för att hantera och distribuera konfiguration globalt på edge. Detta blogginlägg ger en omfattande guide för att förstå och använda Next.js Edge Config för att optimera din applikations prestanda och leverera skräddarsydda upplevelser till din globala publik.

Vad är Next.js Edge Config?

Next.js Edge Config är en globalt distribuerad nyckel-värde-databas med låg latens, speciellt utformad för att leverera konfigurationsdata till Next.js Edge Functions. Till skillnad från traditionella databaser eller API:er är Edge Config optimerad för hastighet och effektivitet, vilket gör att du kan komma åt konfigurationsdata på millisekunder från var som helst i världen. Detta gör det möjligt för dig att dynamiskt anpassa din applikations beteende baserat på konfigurationsvärden, utan att offra prestanda.

Tänk på det som en globalt replikerad JSON-fil som du kan fråga otroligt snabbt från Edge Functions. Detta gör den idealisk för:

Varför använda Edge Config?

Här är de främsta fördelarna med att använda Next.js Edge Config:

Hur man kommer igång med Edge Config

Här är en steg-för-steg-guide för att komma igång med Next.js Edge Config:

1. Projektkonfiguration

Se till att du har ett Next.js-projekt. Om inte, skapa ett med:

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

2. Skapa en Edge Config

Du behöver ett Vercel-konto för att använda Edge Config. När du är inloggad, navigera till ditt Vercel-projekt och skapa en ny Edge Config. Ge den ett beskrivande namn.

3. Installera Edge Config SDK

Installera @vercel/edge-config SDK i ditt Next.js-projekt:

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

4. Konfigurera miljövariabler

Du måste konfigurera miljövariabeln EDGE_CONFIG. Du hittar värdet för denna variabel i Vercels instrumentpanel för din Edge Config. Lägg till den i din .env.local-fil (eller dina Vercel-projektinställningar för produktion):

EDGE_CONFIG=your_edge_config_url

Viktigt: Skicka aldrig in din .env.local-fil till ditt repository. Använd Vercels inställningar för miljövariabler för produktionsmiljöer.

5. Åtkomst till konfigurationsvärden i din kod

Nu kan du komma åt dina Edge Config-värden i din Next.js-kod. Här är ett exempel:

// 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>Funktionen är aktiverad!</p> : <p>Funktionen är inaktiverad.</p>}
    </div>
  );
}

I det här exemplet hämtar vi värdena för featureFlag och welcomeMessage från Edge Config i getServerSideProps. Dessa värden skickas sedan som props till Home-komponenten.

6. Uppdatera konfigurationsvärden

Du kan uppdatera värdena i din Edge Config via Vercels instrumentpanel. Ändringar propageras globalt inom millisekunder.

Avancerade användningsfall och exempel

A/B-testning med Edge Config

Edge Config är perfekt för A/B-testning. Du kan definiera ett konfigurationsvärde som bestämmer vilken version av din applikation som ska serveras till en användare. Till exempel:

  1. Skapa en Edge Config med en nyckel som heter abTestGroup.
  2. Sätt värdet till antingen A eller B.
  3. I din Edge Function, läs värdet för abTestGroup.
  4. Baserat på värdet, servera antingen version A eller version B av ditt innehåll.

Här är ett exempel:

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

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

  let content;
  if (abTestGroup === 'A') {
    content = 'Detta är version A!';
  } else {
    content = 'Detta är version B!';
  }

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

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

Du kan använda analysverktyg för att spåra prestandan för varje version och avgöra vilken version som presterar bättre. Överväg verktyg som Google Analytics, Amplitude eller Mixpanel för omfattande datainsamling och analys vid A/B-testning.

Funktionsflaggor med Edge Config

Funktionsflaggor låter dig aktivera eller inaktivera funktioner utan att distribuera ny kod. Detta är användbart för att testa nya funktioner i produktion или för att gradvis rulla ut funktioner till en delmängd av användare. I likhet med A/B-testning kan du styra funktionstillgängligheten med en enkel boolesk flagga i din Edge Config.

  1. Skapa en Edge Config med en nyckel som heter newFeatureEnabled.
  2. Sätt värdet till antingen true eller false.
  3. I din Edge Function, läs värdet för newFeatureEnabled.
  4. Baserat på värdet, aktivera eller inaktivera den nya funktionen.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>Ny funktion är aktiverad!</p> : <p>Ny funktion är inaktiverad.</p>}
    </div>
  );
}

export default MyComponent;

Personalisering med Edge Config

Du kan använda Edge Config för att personalisera innehåll och upplevelser baserat på användarpreferenser eller plats. Till exempel kan du lagra användarpreferenser i en databas och sedan använda Edge Config för att servera olika innehåll baserat på dessa preferenser.

Exempelscenario: En global e-handelssajt vill visa produktrekommendationer baserat på användarens land. De skulle kunna använda en Edge Config för att mappa länder till rekommendationskategorier.

  1. Skapa en Edge Config med en nyckel som heter countryToCategoryMap.
  2. Sätt värdet till ett JSON-objekt som mappar länder till produktkategorier (t.ex. {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. I din Edge Function, läs värdet för countryToCategoryMap.
  4. Bestäm användarens land (t.ex. från deras IP-adress eller en cookie).
  5. Använd countryToCategoryMap för att bestämma lämplig produktkategori.
  6. Visa produktrekommendationer från den kategorin.
// 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'; // Standard är US
  const category = countryToCategoryMap[country] || 'General'; // Standard är General

  // Hämta produktrekommendationer baserat på kategorin
  const products = await fetchProducts(category);

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

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

async function fetchProducts(category) {
  // Ersätt med din faktiska logik för att hämta produkter
  return [
    { id: 1, name: `Produkt 1 (${category})` },
    { id: 2, name: `Produkt 2 (${category})` },
  ];
}

Detta exempel använder x-vercel-ip-country-headern för att bestämma användarens land. Denna header läggs automatiskt till av Vercel. Det är viktigt att notera att att enbart förlita sig på IP-baserad geolokalisering kanske inte alltid är korrekt. Överväg att använda andra metoder som användarangiven plats eller mer sofistikerade geolokaliseringstjänster för förbättrad noggrannhet.

Geografisk routing med Edge Config

Du kan dirigera användare till olika resurser baserat på deras plats med hjälp av Edge Config. Detta är användbart för att servera lokaliserat innehåll eller för att följa regionala bestämmelser.

  1. Skapa en Edge Config med en nyckel som heter countryToRedirectMap.
  2. Sätt värdet till ett JSON-objekt som mappar länder till URL:er (t.ex. {"CN": "/china", "DE": "/germany"}).
  3. I din Edge Function, läs värdet för countryToRedirectMap.
  4. Bestäm användarens land (t.ex. från deras IP-adress).
  5. Omdirigera användaren till lämplig 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'; // Standard är US
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Detta exempel använder egenskapen req.geo.country, som automatiskt fylls i av Vercels Edge Network med användarens landskod. Detta är en renare och mer tillförlitlig metod än att parsa x-vercel-ip-country-headern direkt. Middleware-funktionen kontrollerar om det finns en omdirigerings-URL definierad för användarens land i Edge Config. Om så är fallet omdirigerar den användaren till den URL:en. Annars fortsätter den att bearbeta begäran.

Hastighetsbegränsning med Edge Config

Även om Edge Config inte är utformad för att vara en fullfjädrad lösning för hastighetsbegränsning, kan du använda den i kombination med andra tekniker för att implementera grundläggande hastighetsbegränsning. Idén är att lagra parametrar för hastighetsbegränsning (t.ex. förfrågningar per minut) i Edge Config och sedan använda dessa parametrar i dina Edge Functions för att genomdriva hastighetsgränserna.

Viktig anmärkning: Denna metod är lämplig för enkla scenarier med hastighetsbegränsning. För mer robust hastighetsbegränsning, överväg att använda dedikerade tjänster eller middleware för hastighetsbegränsning.

  1. Skapa en Edge Config med nycklar som requestsPerMinute och blockedIps.
  2. Sätt värdet för requestsPerMinute till önskad hastighetsgräns.
  3. Sätt värdet för blockedIps till en array av IP-adresser som ska blockeras.
  4. I din Edge Function, läs värdena för requestsPerMinute och blockedIps.
  5. Kontrollera om användarens IP-adress finns i blockedIps-arrayen. Om så är fallet, blockera begäran.
  6. Använd en cachningsmekanism (t.ex. Redis eller Vercels Edge Cache) för att spåra antalet förfrågningar från varje IP-adress under den senaste minuten.
  7. Om antalet förfrågningar från användarens IP-adress överskrider requestsPerMinute-gränsen, blockera begäran.

Exempel (Illustrativt - Kräver ytterligare implementering för cachning):

// 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; // Hämta användarens IP

  // Kontrollera om IP-adressen är blockerad
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Implementera räkning av förfrågningar och cachelagring (t.ex. med Redis eller Vercel Edge Cache)
  // Exempel (Konceptuellt):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Din skyddade route-logik här
  res.status(200).send('Skyddad route nådd framgångsrikt!');
}

Viktiga överväganden för hastighetsbegränsning:

Bästa praxis för att använda Edge Config

Alternativ till Edge Config

Även om Edge Config är ett kraftfullt verktyg är det inte alltid den bästa lösningen för varje användningsfall. Här är några alternativ att överväga:

Slutsats

Next.js Edge Config är ett kraftfullt verktyg för att hantera och distribuera konfiguration globalt på edge. Genom att utnyttja Edge Config kan du optimera din applikations prestanda, leverera personliga upplevelser och förenkla ditt arbetsflöde för konfigurationshantering. Oavsett om du bygger en global e-handelssajt, en social medieplattform eller någon annan typ av webbapplikation kan Edge Config hjälpa dig att leverera en snabb och engagerande upplevelse till dina användare över hela världen. Utforska möjligheterna och integrera Edge Config i dina Next.js-projekt idag för att låsa upp dess potential!