M

MLOG

Čeština

Prozkoumejte Next.js Edge Config: výkonné řešení pro globální distribuci konfigurace s rychlostí a efektivitou. Naučte se optimalizovat aplikaci dynamickou konfigurací na edge.

Next.js Edge Config: Snadná distribuce globální konfigurace

V dnešním rychle se vyvíjejícím světě webového vývoje je klíčové poskytovat uživatelům po celém světě personalizované a dynamické zážitky. Next.js, populární React framework, nabízí robustní řešení pro tvorbu výkonných a škálovatelných webových aplikací. Jednou z jeho klíčových funkcí je Edge Config, výkonný nástroj pro správu a globální distribuci konfigurace na edge. Tento blogový příspěvek poskytuje komplexního průvodce pro pochopení a využití Next.js Edge Config k optimalizaci výkonu vaší aplikace a poskytování přizpůsobených zážitků globálnímu publiku.

Co je Next.js Edge Config?

Next.js Edge Config je globálně distribuované úložiště klíč-hodnota s nízkou latencí, speciálně navržené pro poskytování konfiguračních dat pro Next.js Edge Functions. Na rozdíl od tradičních databází nebo API je Edge Config optimalizován pro rychlost a efektivitu, což vám umožňuje přistupovat ke konfiguračním datům v řádu milisekund odkudkoli na světě. To vám umožňuje dynamicky upravovat chování vaší aplikace na základě konfiguračních hodnot, aniž byste obětovali výkon.

Představte si to jako globálně replikovaný JSON soubor, na který se můžete z Edge Functions dotazovat neuvěřitelně rychle. Díky tomu je ideální pro:

Proč používat Edge Config?

Zde jsou klíčové výhody používání Next.js Edge Config:

Jak začít s Edge Config

Zde je podrobný průvodce, jak začít s Next.js Edge Config:

1. Nastavení projektu

Ujistěte se, že máte projekt v Next.js. Pokud ne, vytvořte jej pomocí:

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

2. Vytvoření Edge Config

Pro použití Edge Config budete potřebovat účet na Vercelu. Jakmile jste přihlášeni, přejděte do svého projektu na Vercelu a vytvořte novou Edge Config. Dejte jí popisný název.

3. Instalace Edge Config SDK

Nainstalujte SDK @vercel/edge-config do svého projektu Next.js:

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

4. Konfigurace proměnných prostředí

Budete muset nakonfigurovat proměnnou prostředí EDGE_CONFIG. Hodnotu této proměnné najdete v dashboardu Vercelu pro vaši Edge Config. Přidejte ji do svého souboru .env.local (nebo do nastavení projektu na Vercelu pro produkční prostředí):

EDGE_CONFIG=your_edge_config_url

Důležité: Nikdy nekomitujte soubor .env.local do vašeho repozitáře. Pro produkční prostředí používejte nastavení proměnných prostředí na Vercelu.

5. Přístup k hodnotám konfigurace ve vašem kódu

Nyní můžete přistupovat k hodnotám z Edge Config ve vašem kódu Next.js. Zde je příklad:

// 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>Funkce je povolena!</p> : <p>Funkce je zakázána.</p>}
    </div>
  );
}

V tomto příkladu načítáme hodnoty featureFlag a welcomeMessage z Edge Config v getServerSideProps. Tyto hodnoty jsou poté předány jako props komponentě Home.

6. Aktualizace konfiguračních hodnot

Hodnoty ve vaší Edge Config můžete aktualizovat prostřednictvím dashboardu Vercelu. Změny se globálně projeví během milisekund.

Pokročilé případy použití a příklady

A/B testování s Edge Config

Edge Config je ideální pro A/B testování. Můžete definovat konfigurační hodnotu, která určí, jakou verzi vaší aplikace uživateli zobrazit. Například:

  1. Vytvořte Edge Config s klíčem nazvaným abTestGroup.
  2. Nastavte hodnotu buď na A nebo B.
  3. Ve vaší Edge Function přečtěte hodnotu abTestGroup.
  4. Na základě hodnoty zobrazte buď verzi A nebo verzi B vašeho obsahu.

Zde je příklad:

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

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

  let content;
  if (abTestGroup === 'A') {
    content = 'Toto je verze A!';
  } else {
    content = 'Toto je verze B!';
  }

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

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

Můžete použít analytické nástroje ke sledování výkonu každé verze a zjistit, která verze funguje lépe. Pro komplexní sběr a analýzu dat A/B testování zvažte nástroje jako Google Analytics, Amplitude nebo Mixpanel.

Feature flagy s Edge Config

Feature flagy vám umožňují povolit nebo zakázat funkce bez nasazení nového kódu. To je užitečné pro testování nových funkcí v produkci nebo postupné zavádění funkcí pro podmnožinu uživatelů. Podobně jako u A/B testování můžete ovládat dostupnost funkcí jednoduchým booleovským příznakem ve vaší Edge Config.

  1. Vytvořte Edge Config s klíčem nazvaným newFeatureEnabled.
  2. Nastavte hodnotu buď na true nebo false.
  3. Ve vaší Edge Function přečtěte hodnotu newFeatureEnabled.
  4. Na základě hodnoty povolte nebo zakažte novou funkci.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>Nová funkce je povolena!</p> : <p>Nová funkce je zakázána.</p>}
    </div>
  );
}

export default MyComponent;

Personalizace s Edge Config

Můžete použít Edge Config k personalizaci obsahu a zážitků na základě preferencí nebo polohy uživatele. Například můžete ukládat uživatelské preference do databáze a poté pomocí Edge Config zobrazovat různý obsah na základě těchto preferencí.

Příkladový scénář: Globální e-commerce web chce zobrazovat doporučení produktů na základě země uživatele. Mohli by použít Edge Config k mapování zemí na kategorie doporučení.

  1. Vytvořte Edge Config s klíčem nazvaným countryToCategoryMap.
  2. Nastavte hodnotu na JSON objekt, který mapuje země na kategorie produktů (např. {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. Ve vaší Edge Function přečtěte hodnotu countryToCategoryMap.
  4. Určete zemi uživatele (např. z jeho IP adresy nebo cookie).
  5. Použijte countryToCategoryMap k určení příslušné kategorie produktů.
  6. Zobrazte doporučení produktů z této kategorie.
// 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'; // Výchozí hodnota US
  const category = countryToCategoryMap[country] || 'General'; // Výchozí hodnota General

  // Načtení doporučení produktů na základě kategorie
  const products = await fetchProducts(category);

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

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

async function fetchProducts(category) {
  // Nahraďte vaší skutečnou logikou pro načítání produktů
  return [
    { id: 1, name: `Produkt 1 (${category})` },
    { id: 2, name: `Produkt 2 (${category})` },
  ];
}

Tento příklad používá hlavičku x-vercel-ip-country k určení země uživatele. Tato hlavička je automaticky přidána Vercelem. Je důležité si uvědomit, že spoléhání se pouze na geolokaci podle IP nemusí být vždy přesné. Pro zlepšení přesnosti zvažte použití jiných metod, jako je poloha poskytnutá uživatelem nebo sofistikovanější geolokační služby.

Geografické směrování s Edge Config

Pomocí Edge Config můžete směrovat uživatele na různé zdroje na základě jejich polohy. To je užitečné pro poskytování lokalizovaného obsahu nebo pro dodržování regionálních předpisů.

  1. Vytvořte Edge Config s klíčem nazvaným countryToRedirectMap.
  2. Nastavte hodnotu na JSON objekt, který mapuje země na URL adresy (např. {"CN": "/china", "DE": "/germany"}).
  3. Ve vaší Edge Function přečtěte hodnotu countryToRedirectMap.
  4. Určete zemi uživatele (např. z jeho IP adresy).
  5. Přesměrujte uživatele na příslušnou 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'; // Výchozí hodnota US
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Tento příklad používá vlastnost req.geo.country, která je automaticky naplněna kódem země uživatele sítí Vercel's Edge Network. Je to čistší a spolehlivější přístup než přímé parsování hlavičky x-vercel-ip-country. Funkce middleware zkontroluje, zda je v Edge Config definována URL pro přesměrování pro zemi uživatele. Pokud ano, přesměruje uživatele na tuto URL. V opačném případě pokračuje ve zpracování požadavku.

Omezení počtu požadavků (Rate Limiting) s Edge Config

Ačkoli Edge Config není navržen jako plnohodnotné řešení pro omezování počtu požadavků, můžete ho použít ve spojení s jinými technikami k implementaci základního omezování. Myšlenka je uložit parametry omezování (např. požadavky za minutu) do Edge Config a poté tyto parametry použít ve vašich Edge Functions k vynucení limitů.

Důležitá poznámka: Tento přístup je vhodný pro jednoduché scénáře omezování počtu požadavků. Pro robustnější řešení zvažte použití specializovaných služeb nebo middleware pro rate limiting.

  1. Vytvořte Edge Config s klíči jako requestsPerMinute a blockedIps.
  2. Nastavte hodnotu requestsPerMinute na požadovaný limit.
  3. Nastavte hodnotu blockedIps na pole IP adres, které by měly být blokovány.
  4. Ve vaší Edge Function přečtěte hodnoty requestsPerMinute a blockedIps.
  5. Zkontrolujte, zda je IP adresa uživatele v poli blockedIps. Pokud ano, zablokujte požadavek.
  6. Použijte mechanismus cachování (např. Redis nebo Vercel's Edge Cache) ke sledování počtu požadavků z každé IP adresy za poslední minutu.
  7. Pokud počet požadavků z IP adresy uživatele překročí limit requestsPerMinute, zablokujte požadavek.

Příklad (Ilustrativní - vyžaduje dodatečnou implementaci pro cachování):

// 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; // Získání IP uživatele

  // Kontrola, zda je IP blokována
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Implementujte počítání požadavků a cachování (např. pomocí Redis nebo Vercel Edge Cache)
  // Příklad (Konceptuální):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Vaše logika chráněné trasy zde
  res.status(200).send('Přístup k chráněné trase byl úspěšný!');
}

Důležité úvahy pro Rate Limiting:

Osvědčené postupy pro používání Edge Config

Alternativy k Edge Config

Ačkoli je Edge Config výkonný nástroj, ne vždy je to nejlepší řešení pro každý případ použití. Zde jsou některé alternativy k zvážení:

Závěr

Next.js Edge Config je výkonný nástroj pro správu a globální distribuci konfigurace na edge. Využitím Edge Config můžete optimalizovat výkon vaší aplikace, poskytovat personalizované zážitky a zjednodušit pracovní postup správy konfigurace. Ať už vytváříte globální e-commerce web, platformu sociálních médií nebo jakýkoli jiný typ webové aplikace, Edge Config vám může pomoci poskytnout rychlý a poutavý zážitek vašim uživatelům po celém světě. Prozkoumejte možnosti a integrujte Edge Config do svých projektů Next.js ještě dnes, abyste odemkli jeho potenciál!