M

MLOG

Deutsch

Entdecken Sie Next.js Edge Config: eine leistungsstarke Lösung für die schnelle und effiziente globale Verteilung von Konfigurationen. Erfahren Sie, wie Sie Ihre Anwendung mit dynamischer Konfiguration am Edge optimieren.

Next.js Edge Config: Globale Konfigurationsverteilung leicht gemacht

In der heutigen schnelllebigen Webentwicklungslandschaft ist es entscheidend, Nutzern weltweit personalisierte und dynamische Erlebnisse zu bieten. Next.js, ein beliebtes React-Framework, bietet eine robuste Lösung für die Erstellung performanter und skalierbarer Webanwendungen. Eine seiner Schlüsselfunktionen ist Edge Config, ein leistungsstarkes Werkzeug zur Verwaltung und globalen Verteilung von Konfigurationen am Edge. Dieser Blogbeitrag bietet eine umfassende Anleitung zum Verständnis und zur Nutzung von Next.js Edge Config, um die Leistung Ihrer Anwendung zu optimieren und Ihrem globalen Publikum maßgeschneiderte Erlebnisse zu bieten.

Was ist Next.js Edge Config?

Next.js Edge Config ist ein global verteilter Key-Value-Speicher mit geringer Latenz, der speziell für die Bereitstellung von Konfigurationsdaten für Next.js Edge Functions entwickelt wurde. Im Gegensatz zu herkömmlichen Datenbanken oder APIs ist Edge Config auf Geschwindigkeit und Effizienz optimiert, sodass Sie von überall auf der Welt in Millisekunden auf Konfigurationsdaten zugreifen können. Dies ermöglicht es Ihnen, das Verhalten Ihrer Anwendung dynamisch auf der Grundlage von Konfigurationswerten anzupassen, ohne die Leistung zu beeinträchtigen.

Stellen Sie es sich wie eine global replizierte JSON-Datei vor, die Sie unglaublich schnell von Edge Functions abfragen können. Das macht es ideal für:

Warum Edge Config verwenden?

Hier sind die wichtigsten Vorteile der Verwendung von Next.js Edge Config:

Erste Schritte mit Edge Config

Hier ist eine Schritt-für-Schritt-Anleitung für den Einstieg in Next.js Edge Config:

1. Projekteinrichtung

Stellen Sie sicher, dass Sie ein Next.js-Projekt haben. Wenn nicht, erstellen Sie eines mit:

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

2. Eine Edge Config erstellen

Sie benötigen ein Vercel-Konto, um Edge Config zu verwenden. Sobald Sie angemeldet sind, navigieren Sie zu Ihrem Vercel-Projekt und erstellen eine neue Edge Config. Geben Sie ihr einen aussagekräftigen Namen.

3. Das Edge Config SDK installieren

Installieren Sie das @vercel/edge-config SDK in Ihrem Next.js-Projekt:

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

4. Umgebungsvariablen konfigurieren

Sie müssen die Umgebungsvariable EDGE_CONFIG konfigurieren. Den Wert dieser Variable finden Sie im Vercel-Dashboard für Ihre Edge Config. Fügen Sie ihn Ihrer .env.local-Datei hinzu (oder den Einstellungen Ihres Vercel-Projekts für die Produktion):

EDGE_CONFIG=your_edge_config_url

Wichtig: Committen Sie niemals Ihre .env.local-Datei in Ihr Repository. Verwenden Sie die Umgebungsvariablen-Einstellungen von Vercel für Produktionsumgebungen.

5. Auf Konfigurationswerte in Ihrem Code zugreifen

Jetzt können Sie auf Ihre Edge-Config-Werte in Ihrem Next.js-Code zugreifen. Hier ist ein Beispiel:

// 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>Funktion ist aktiviert!</p> : <p>Funktion ist deaktiviert.</p>}
    </div>
  );
}

In diesem Beispiel holen wir die Werte von featureFlag und welcomeMessage aus der Edge Config in getServerSideProps. Diese Werte werden dann als Props an die Home-Komponente übergeben.

6. Konfigurationswerte aktualisieren

Sie können die Werte in Ihrer Edge Config über das Vercel-Dashboard aktualisieren. Änderungen werden global innerhalb von Millisekunden verbreitet.

Fortgeschrittene Anwendungsfälle und Beispiele

A/B-Tests mit Edge Config

Edge Config ist perfekt für A/B-Tests. Sie können einen Konfigurationswert definieren, der bestimmt, welche Version Ihrer Anwendung einem Benutzer angezeigt wird. Zum Beispiel:

  1. Erstellen Sie eine Edge Config mit einem Schlüssel namens abTestGroup.
  2. Setzen Sie den Wert auf entweder A oder B.
  3. Lesen Sie in Ihrer Edge Function den Wert von abTestGroup aus.
  4. Liefern Sie basierend auf dem Wert entweder Version A oder Version B Ihres Inhalts aus.

Hier ist ein Beispiel:

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

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

  let content;
  if (abTestGroup === 'A') {
    content = 'Das ist Version A!';
  } else {
    content = 'Das ist Version B!';
  }

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

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

Sie können Analysetools verwenden, um die Leistung jeder Version zu verfolgen und festzustellen, welche Version besser abschneidet. Ziehen Sie Tools wie Google Analytics, Amplitude oder Mixpanel für eine umfassende Datenerfassung und Analyse von A/B-Tests in Betracht.

Feature-Flags mit Edge Config

Feature-Flags ermöglichen es Ihnen, Funktionen zu aktivieren oder zu deaktivieren, ohne neuen Code bereitzustellen. Dies ist nützlich, um neue Funktionen in der Produktion zu testen oder Funktionen schrittweise für eine Teilmenge von Benutzern auszurollen. Ähnlich wie bei A/B-Tests können Sie die Verfügbarkeit von Funktionen mit einem einfachen booleschen Flag in Ihrer Edge Config steuern.

  1. Erstellen Sie eine Edge Config mit einem Schlüssel namens newFeatureEnabled.
  2. Setzen Sie den Wert auf entweder true oder false.
  3. Lesen Sie in Ihrer Edge Function den Wert von newFeatureEnabled aus.
  4. Aktivieren oder deaktivieren Sie die neue Funktion basierend auf dem Wert.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>Neue Funktion ist aktiviert!</p> : <p>Neue Funktion ist deaktiviert.</p>}
    </div>
  );
}

export default MyComponent;

Personalisierung mit Edge Config

Sie können Edge Config verwenden, um Inhalte und Erlebnisse basierend auf Benutzerpräferenzen oder dem Standort zu personalisieren. Sie können beispielsweise Benutzerpräferenzen in einer Datenbank speichern und dann Edge Config verwenden, um basierend auf diesen Präferenzen unterschiedliche Inhalte bereitzustellen.

Beispielszenario: Eine globale E-Commerce-Website möchte Produktempfehlungen basierend auf dem Land des Benutzers anzeigen. Sie könnte eine Edge Config verwenden, um Länder auf Empfehlungskategorien abzubilden.

  1. Erstellen Sie eine Edge Config mit einem Schlüssel namens countryToCategoryMap.
  2. Setzen Sie den Wert auf ein JSON-Objekt, das Länder auf Produktkategorien abbildet (z. B. {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. Lesen Sie in Ihrer Edge Function den Wert von countryToCategoryMap aus.
  4. Bestimmen Sie das Land des Benutzers (z. B. anhand seiner IP-Adresse oder eines Cookies).
  5. Verwenden Sie die countryToCategoryMap, um die passende Produktkategorie zu bestimmen.
  6. Zeigen Sie Produktempfehlungen aus dieser Kategorie an.
// 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'; // Standardmäßig US
  const category = countryToCategoryMap[country] || 'General'; // Standardmäßig Allgemein

  // Produktempfehlungen basierend auf der Kategorie abrufen
  const products = await fetchProducts(category);

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

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

async function fetchProducts(category) {
  // Ersetzen Sie dies durch Ihre tatsächliche Logik zum Abrufen von Produkten
  return [
    { id: 1, name: `Produkt 1 (${category})` },
    { id: 2, name: `Produkt 2 (${category})` },
  ];
}

Dieses Beispiel verwendet den x-vercel-ip-country-Header, um das Land des Benutzers zu bestimmen. Dieser Header wird von Vercel automatisch hinzugefügt. Es ist wichtig zu beachten, dass die alleinige Verwendung von IP-basierter Geolokalisierung nicht immer genau sein kann. Ziehen Sie die Verwendung anderer Methoden wie vom Benutzer angegebene Standorte oder anspruchsvollere Geolokalisierungsdienste für eine verbesserte Genauigkeit in Betracht.

Geografisches Routing mit Edge Config

Sie können Benutzer basierend auf ihrem Standort mit Edge Config zu verschiedenen Ressourcen weiterleiten. Dies ist nützlich, um lokalisierte Inhalte bereitzustellen oder regionale Vorschriften einzuhalten.

  1. Erstellen Sie eine Edge Config mit einem Schlüssel namens countryToRedirectMap.
  2. Setzen Sie den Wert auf ein JSON-Objekt, das Länder auf URLs abbildet (z. B. {"CN": "/china", "DE": "/germany"}).
  3. Lesen Sie in Ihrer Edge Function den Wert von countryToRedirectMap aus.
  4. Bestimmen Sie das Land des Benutzers (z. B. anhand seiner IP-Adresse).
  5. Leiten Sie den Benutzer zur entsprechenden URL weiter.
// 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'; // Standardmäßig US
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Dieses Beispiel verwendet die Eigenschaft req.geo.country, die vom Vercel Edge Network automatisch mit dem Ländercode des Benutzers gefüllt wird. Dies ist ein saubererer und zuverlässigerer Ansatz als das direkte Parsen des x-vercel-ip-country-Headers. Die Middleware-Funktion prüft, ob eine Weiterleitungs-URL für das Land des Benutzers in der Edge Config definiert ist. Wenn ja, leitet sie den Benutzer zu dieser URL weiter. Andernfalls wird die Anfrage weiterverarbeitet.

Ratenbegrenzung mit Edge Config

Obwohl Edge Config nicht als vollwertige Lösung zur Ratenbegrenzung konzipiert ist, können Sie es in Verbindung mit anderen Techniken verwenden, um eine grundlegende Ratenbegrenzung zu implementieren. Die Idee ist, Ratenbegrenzungsparameter (z. B. Anfragen pro Minute) in Edge Config zu speichern und diese Parameter dann in Ihren Edge Functions zu verwenden, um Ratenbegrenzungen durchzusetzen.

Wichtiger Hinweis: Dieser Ansatz eignet sich für einfache Szenarien der Ratenbegrenzung. Für eine robustere Ratenbegrenzung sollten Sie dedizierte Ratenbegrenzungsdienste oder Middleware in Betracht ziehen.

  1. Erstellen Sie eine Edge Config mit Schlüsseln wie requestsPerMinute und blockedIps.
  2. Setzen Sie den Wert von requestsPerMinute auf das gewünschte Ratenlimit.
  3. Setzen Sie den Wert von blockedIps auf ein Array von IP-Adressen, die blockiert werden sollen.
  4. Lesen Sie in Ihrer Edge Function die Werte von requestsPerMinute und blockedIps aus.
  5. Prüfen Sie, ob die IP-Adresse des Benutzers im blockedIps-Array enthalten ist. Wenn ja, blockieren Sie die Anfrage.
  6. Verwenden Sie einen Caching-Mechanismus (z. B. Redis oder Vercels Edge Cache), um die Anzahl der Anfragen von jeder IP-Adresse innerhalb der letzten Minute zu verfolgen.
  7. Wenn die Anzahl der Anfragen von der IP-Adresse des Benutzers das requestsPerMinute-Limit überschreitet, blockieren Sie die Anfrage.

Beispiel (Illustrativ - Erfordert zusätzliche Implementierung für 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; // IP des Benutzers abrufen

  // Prüfen, ob die IP blockiert ist
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Zu viele Anfragen');
  }

  // TODO: Implementierung der Anforderungszählung und des Cachings (z. B. mit Redis oder Vercel Edge Cache)
  // Beispiel (konzeptionell):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Zu viele Anfragen');
  // }
  // await incrementRequestCount(ip);

  // Ihre geschützte Routenlogik hier
  res.status(200).send('Geschützte Route erfolgreich aufgerufen!');
}

Wichtige Überlegungen zur Ratenbegrenzung:

Best Practices für die Verwendung von Edge Config

Alternativen zu Edge Config

Obwohl Edge Config ein leistungsstarkes Werkzeug ist, ist es nicht immer die beste Lösung für jeden Anwendungsfall. Hier sind einige Alternativen, die Sie in Betracht ziehen sollten:

Fazit

Next.js Edge Config ist ein leistungsstarkes Werkzeug zur Verwaltung und globalen Verteilung von Konfigurationen am Edge. Durch die Nutzung von Edge Config können Sie die Leistung Ihrer Anwendung optimieren, personalisierte Erlebnisse bieten und Ihren Konfigurationsmanagement-Workflow vereinfachen. Egal, ob Sie eine globale E-Commerce-Website, eine Social-Media-Plattform oder eine andere Art von Webanwendung erstellen, Edge Config kann Ihnen helfen, Ihren Nutzern weltweit ein schnelles und ansprechendes Erlebnis zu bieten. Erkunden Sie die Möglichkeiten und integrieren Sie Edge Config noch heute in Ihre Next.js-Projekte, um ihr Potenzial freizusetzen!