M

MLOG

Polski

Odkryj Next.js Edge Config: potężne rozwiązanie do globalnej dystrybucji konfiguracji z szybkością i wydajnością. Dowiedz się, jak optymalizować aplikację dzięki dynamicznej konfiguracji na brzegu sieci.

Next.js Edge Config: Łatwa Dystrybucja Globalnej Konfiguracji

W dzisiejszym, dynamicznym świecie tworzenia stron internetowych, dostarczanie spersonalizowanych i dynamicznych doświadczeń użytkownikom na całym świecie jest kluczowe. Next.js, popularny framework Reacta, oferuje solidne rozwiązanie do budowania wydajnych i skalowalnych aplikacji internetowych. Jedną z jego kluczowych funkcji jest Edge Config, potężne narzędzie do zarządzania i dystrybucji konfiguracji globalnie, na brzegu sieci (edge). Ten wpis na blogu stanowi kompleksowy przewodnik po zrozumieniu i wykorzystaniu Next.js Edge Config w celu optymalizacji wydajności aplikacji i dostarczania dopasowanych doświadczeń globalnej publiczności.

Czym jest Next.js Edge Config?

Next.js Edge Config to globalnie dystrybuowany magazyn klucz-wartość o niskim opóźnieniu, zaprojektowany specjalnie do serwowania danych konfiguracyjnych dla funkcji brzegowych Next.js (Edge Functions). W przeciwieństwie do tradycyjnych baz danych czy API, Edge Config jest zoptymalizowany pod kątem szybkości i wydajności, umożliwiając dostęp do danych konfiguracyjnych w milisekundach z dowolnego miejsca na świecie. Pozwala to na dynamiczne dostosowywanie zachowania aplikacji w oparciu o wartości konfiguracyjne, bez poświęcania wydajności.

Można o tym myśleć jak o globalnie replikowanym pliku JSON, do którego można niezwykle szybko odpytywać z poziomu funkcji brzegowych. To sprawia, że jest to idealne rozwiązanie do:

Dlaczego warto używać Edge Config?

Oto kluczowe korzyści płynące z używania Next.js Edge Config:

Jak zacząć z Edge Config?

Oto przewodnik krok po kroku, jak zacząć pracę z Next.js Edge Config:

1. Konfiguracja Projektu

Upewnij się, że masz projekt Next.js. Jeśli nie, utwórz go za pomocą:

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

2. Utwórz Edge Config

Będziesz potrzebować konta Vercel, aby używać Edge Config. Po zalogowaniu przejdź do swojego projektu Vercel i utwórz nowy Edge Config. Nadaj mu opisową nazwę.

3. Zainstaluj SDK Edge Config

Zainstaluj SDK @vercel/edge-config w swoim projekcie Next.js:

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

4. Skonfiguruj Zmienne Środowiskowe

Musisz skonfigurować zmienną środowiskową EDGE_CONFIG. Wartość tej zmiennej znajdziesz w panelu Vercel dla swojego Edge Config. Dodaj ją do pliku .env.local (lub do ustawień projektu Vercel dla środowiska produkcyjnego):

EDGE_CONFIG=your_edge_config_url

Ważne: Nigdy nie umieszczaj pliku .env.local w swoim repozytorium. Użyj ustawień zmiennych środowiskowych Vercel dla środowisk produkcyjnych.

5. Dostęp do Wartości Konfiguracyjnych w Kodzie

Teraz możesz uzyskać dostęp do wartości z Edge Config w swoim kodzie Next.js. Oto przykład:

// 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>
  );
}

W tym przykładzie pobieramy wartości featureFlag i welcomeMessage z Edge Config w funkcji getServerSideProps. Wartości te są następnie przekazywane jako właściwości (props) do komponentu Home.

6. Aktualizacja Wartości Konfiguracyjnych

Możesz aktualizować wartości w swoim Edge Config za pośrednictwem panelu Vercel. Zmiany są propagowane globalnie w ciągu milisekund.

Zaawansowane Przypadki Użycia i Przykłady

Testy A/B z Edge Config

Edge Config jest idealny do testów A/B. Możesz zdefiniować wartość konfiguracyjną, która określa, którą wersję aplikacji serwować użytkownikowi. Na przykład:

  1. Utwórz Edge Config z kluczem o nazwie abTestGroup.
  2. Ustaw wartość na A lub B.
  3. W swojej funkcji brzegowej odczytaj wartość abTestGroup.
  4. Na podstawie wartości zaserwuj wersję A lub wersję B swojej treści.

Oto przykład:

// 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>
  );
}

Możesz używać narzędzi analitycznych do śledzenia wydajności każdej wersji i określania, która z nich działa lepiej. Rozważ narzędzia takie jak Google Analytics, Amplitude czy Mixpanel do kompleksowego zbierania i analizy danych z testów A/B.

Flagi Funkcji z Edge Config

Flagi funkcji (feature flags) pozwalają włączać lub wyłączać funkcje bez wdrażania nowego kodu. Jest to przydatne do testowania nowych funkcji w środowisku produkcyjnym lub stopniowego udostępniania funkcji podzbiorowi użytkowników. Podobnie jak w przypadku testów A/B, możesz kontrolować dostępność funkcji za pomocą prostej flagi logicznej (boolean) w swoim Edge Config.

  1. Utwórz Edge Config z kluczem o nazwie newFeatureEnabled.
  2. Ustaw wartość na true lub false.
  3. W swojej funkcji brzegowej odczytaj wartość newFeatureEnabled.
  4. Na podstawie wartości włącz lub wyłącz nową funkcję.
// 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;

Personalizacja z Edge Config

Możesz używać Edge Config do personalizacji treści i doświadczeń na podstawie preferencji lub lokalizacji użytkownika. Na przykład, możesz przechowywać preferencje użytkownika w bazie danych, a następnie używać Edge Config do serwowania różnych treści na podstawie tych preferencji.

Przykładowy scenariusz: Globalny sklep e-commerce chce wyświetlać rekomendacje produktów na podstawie kraju użytkownika. Mógłby użyć Edge Config do mapowania krajów na kategorie rekomendacji.

  1. Utwórz Edge Config z kluczem o nazwie countryToCategoryMap.
  2. Ustaw wartość na obiekt JSON, który mapuje kraje na kategorie produktów (np. {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. W swojej funkcji brzegowej odczytaj wartość countryToCategoryMap.
  4. Określ kraj użytkownika (np. na podstawie jego adresu IP lub ciasteczka).
  5. Użyj countryToCategoryMap do określenia odpowiedniej kategorii produktów.
  6. Wyświetl rekomendacje produktów z tej kategorii.
// 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'; // Default to US
  const category = countryToCategoryMap[country] || 'General'; // Default to General

  // Fetch product recommendations based on the category
  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) {
  // Replace with your actual product fetching logic
  return [
    { id: 1, name: `Product 1 (${category})` },
    { id: 2, name: `Product 2 (${category})` },
  ];
}

Ten przykład używa nagłówka x-vercel-ip-country do określenia kraju użytkownika. Ten nagłówek jest automatycznie dodawany przez Vercel. Należy pamiętać, że poleganie wyłącznie na geolokalizacji opartej na IP nie zawsze jest dokładne. W celu poprawy dokładności rozważ użycie innych metod, takich jak lokalizacja podana przez użytkownika lub bardziej zaawansowane usługi geolokalizacyjne.

Routing Geograficzny z Edge Config

Możesz kierować użytkowników do różnych zasobów w zależności od ich lokalizacji, używając Edge Config. Jest to przydatne do serwowania zlokalizowanych treści lub przestrzegania regionalnych regulacji.

  1. Utwórz Edge Config z kluczem o nazwie countryToRedirectMap.
  2. Ustaw wartość na obiekt JSON, który mapuje kraje na adresy URL (np. {"CN": "/china", "DE": "/germany"}).
  3. W swojej funkcji brzegowej odczytaj wartość countryToRedirectMap.
  4. Określ kraj użytkownika (np. na podstawie jego adresu IP).
  5. Przekieruj użytkownika na odpowiedni 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'; // Default to US
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Ten przykład używa właściwości req.geo.country, która jest automatycznie uzupełniana przez sieć brzegową Vercel kodem kraju użytkownika. Jest to czystsze i bardziej niezawodne podejście niż bezpośrednie parsowanie nagłówka x-vercel-ip-country. Funkcja middleware sprawdza, czy w Edge Config zdefiniowano URL przekierowania dla kraju użytkownika. Jeśli tak, przekierowuje użytkownika na ten URL. W przeciwnym razie kontynuuje przetwarzanie żądania.

Ograniczanie Zapytań z Edge Config

Chociaż Edge Config nie jest zaprojektowany jako pełnoprawne rozwiązanie do ograniczania zapytań, można go używać w połączeniu z innymi technikami do implementacji podstawowego ograniczania zapytań. Chodzi o przechowywanie parametrów ograniczania (np. liczba żądań na minutę) w Edge Config, a następnie używanie tych parametrów w funkcjach brzegowych do egzekwowania limitów.

Ważna Uwaga: To podejście jest odpowiednie dla prostych scenariuszy ograniczania zapytań. W przypadku bardziej solidnego ograniczania zapytań, rozważ użycie dedykowanych usług lub middleware do tego celu.

  1. Utwórz Edge Config z kluczami takimi jak requestsPerMinute i blockedIps.
  2. Ustaw wartość requestsPerMinute na pożądany limit zapytań.
  3. Ustaw wartość blockedIps na tablicę adresów IP, które powinny być blokowane.
  4. W swojej funkcji brzegowej odczytaj wartości requestsPerMinute i blockedIps.
  5. Sprawdź, czy adres IP użytkownika znajduje się w tablicy blockedIps. Jeśli tak, zablokuj żądanie.
  6. Użyj mechanizmu buforowania (np. Redis lub Vercel's Edge Cache) do śledzenia liczby żądań z każdego adresu IP w ciągu ostatniej minuty.
  7. Jeśli liczba żądań z adresu IP użytkownika przekroczy limit requestsPerMinute, zablokuj żądanie.

Przykład (Ilustracyjny - Wymaga dodatkowej implementacji buforowania):

// 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; // Get user's IP

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

  // TODO: Implement request counting and caching (e.g., using Redis or Vercel Edge Cache)
  // Example (Conceptual):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Tutaj logika twojej chronionej trasy
  res.status(200).send('Protected route accessed successfully!');
}

Ważne kwestie dotyczące ograniczania zapytań:

Dobre Praktyki Używania Edge Config

Alternatywy dla Edge Config

Chociaż Edge Config jest potężnym narzędziem, nie zawsze jest najlepszym rozwiązaniem dla każdego przypadku użycia. Oto kilka alternatyw do rozważenia:

Podsumowanie

Next.js Edge Config to potężne narzędzie do zarządzania i dystrybucji konfiguracji globalnie, na brzegu sieci. Wykorzystując Edge Config, możesz zoptymalizować wydajność swojej aplikacji, dostarczać spersonalizowane doświadczenia i uprościć proces zarządzania konfiguracją. Niezależnie od tego, czy budujesz globalny sklep e-commerce, platformę mediów społecznościowych, czy jakikolwiek inny rodzaj aplikacji internetowej, Edge Config może pomóc Ci dostarczyć szybkie i angażujące doświadczenie użytkownikom na całym świecie. Odkryj możliwości i zintegruj Edge Config ze swoimi projektami Next.js już dziś, aby uwolnić jego potencjał!