M

MLOG

Українська

Дізнайтеся про Next.js Edge Config: потужне рішення для глобального, швидкого та ефективного розповсюдження конфігурації. Навчіться оптимізувати свій додаток за допомогою динамічної конфігурації на межі мережі.

Next.js Edge Config: Просте глобальне розповсюдження конфігурації

У сучасному динамічному світі веб-розробки надзвичайно важливо надавати користувачам по всьому світу персоналізований та динамічний досвід. Next.js, популярний фреймворк для React, пропонує надійне рішення для створення продуктивних та масштабованих веб-додатків. Однією з його ключових особливостей є Edge Config — потужний інструмент для управління та глобального розповсюдження конфігурації на межі мережі (at the edge). Ця стаття є вичерпним посібником з розуміння та використання Next.js Edge Config для оптимізації продуктивності вашого додатку та надання персоналізованого досвіду вашій глобальній аудиторії.

Що таке Next.js Edge Config?

Next.js Edge Config — це глобально розподілене сховище ключ-значення з низькою затримкою, спеціально розроблене для передачі конфігураційних даних до функцій Next.js Edge Functions. На відміну від традиційних баз даних або API, Edge Config оптимізовано для швидкості та ефективності, що дозволяє отримувати доступ до конфігураційних даних за мілісекунди з будь-якої точки світу. Це дає змогу динамічно змінювати поведінку вашого додатку на основі значень конфігурації без шкоди для продуктивності.

Уявіть це як глобально реплікований JSON-файл, до якого можна надзвичайно швидко робити запити з Edge Functions. Це робить його ідеальним для:

Чому варто використовувати Edge Config?

Ось ключові переваги використання Next.js Edge Config:

Як почати роботу з Edge Config

Ось покрокова інструкція для початку роботи з Next.js Edge Config:

1. Налаштування проєкту

Переконайтеся, що у вас є проєкт Next.js. Якщо ні, створіть його за допомогою:

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

2. Створення Edge Config

Для використання Edge Config вам знадобиться обліковий запис Vercel. Після входу перейдіть до свого проєкту на Vercel і створіть новий Edge Config. Дайте йому описову назву.

3. Встановлення SDK для Edge Config

Встановіть SDK @vercel/edge-config у вашому проєкті Next.js:

npm install @vercel/edge-config
# або
yarn add @vercel/edge-config
# або
pnpm install @vercel/edge-config

4. Налаштування змінних середовища

Вам потрібно налаштувати змінну середовища EDGE_CONFIG. Значення цієї змінної можна знайти на панелі керування Vercel для вашого Edge Config. Додайте її до вашого файлу .env.local (або до налаштувань проєкту Vercel для продакшену):

EDGE_CONFIG=your_edge_config_url

Важливо: Ніколи не комітьте файл .env.local до вашого репозиторію. Використовуйте налаштування змінних середовища Vercel для продакшен-середовищ.

5. Доступ до значень конфігурації у вашому коді

Тепер ви можете отримувати доступ до значень вашого Edge Config у коді Next.js. Ось приклад:

// 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>Функція увімкнена!</p> : <p>Функція вимкнена.</p>}
    </div>
  );
}

У цьому прикладі ми отримуємо значення featureFlag та welcomeMessage з Edge Config у getServerSideProps. Потім ці значення передаються як пропси до компонента Home.

6. Оновлення значень конфігурації

Ви можете оновлювати значення у вашому Edge Config через панель керування Vercel. Зміни поширюються глобально за мілісекунди.

Розширені сценарії використання та приклади

A/B-тестування з Edge Config

Edge Config ідеально підходить для A/B-тестування. Ви можете визначити значення конфігурації, яке визначатиме, яку версію вашого додатку показувати користувачеві. Наприклад:

  1. Створіть Edge Config з ключем abTestGroup.
  2. Встановіть значення A або B.
  3. У вашій Edge Function зчитайте значення abTestGroup.
  4. Залежно від значення, показуйте версію A або версію B вашого контенту.

Ось приклад:

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

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

  let content;
  if (abTestGroup === 'A') {
    content = 'Це версія A!';
  } else {
    content = 'Це версія B!';
  }

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

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

Ви можете використовувати інструменти аналітики для відстеження ефективності кожної версії та визначення, яка з них працює краще. Розгляньте такі інструменти, як Google Analytics, Amplitude або Mixpanel для комплексного збору та аналізу даних A/B-тестування.

Прапорці функцій (Feature Flags) з Edge Config

Прапорці функцій дозволяють вмикати або вимикати функції без розгортання нового коду. Це корисно для тестування нових функцій у продакшені або поступового впровадження функцій для певної групи користувачів. Подібно до A/B-тестування, ви можете контролювати доступність функцій за допомогою простого булевого прапорця у вашому Edge Config.

  1. Створіть Edge Config з ключем newFeatureEnabled.
  2. Встановіть значення true або false.
  3. У вашій Edge Function зчитайте значення newFeatureEnabled.
  4. Залежно від значення, увімкніть або вимкніть нову функцію.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>Нова функція увімкнена!</p> : <p>Нова функція вимкнена.</p>}
    </div>
  );
}

export default MyComponent;

Персоналізація з Edge Config

Ви можете використовувати Edge Config для персоналізації контенту та досвіду користувача на основі його вподобань або місцезнаходження. Наприклад, ви можете зберігати вподобання користувача в базі даних, а потім використовувати Edge Config для показу різного контенту на основі цих вподобань.

Приклад сценарію: Глобальний сайт електронної комерції хоче показувати рекомендації товарів на основі країни користувача. Вони можуть використовувати Edge Config для зіставлення країн з категоріями рекомендацій.

  1. Створіть Edge Config з ключем countryToCategoryMap.
  2. Встановіть значення у вигляді JSON-об'єкта, який зіставляє країни з категоріями товарів (наприклад, {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. У вашій Edge Function зчитайте значення countryToCategoryMap.
  4. Визначте країну користувача (наприклад, за його IP-адресою або cookie).
  5. Використовуйте countryToCategoryMap для визначення відповідної категорії товарів.
  6. Покажіть рекомендації товарів з цієї категорії.
// 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'; // За замовчуванням US
  const category = countryToCategoryMap[country] || 'General'; // За замовчуванням General

  // Отримати рекомендації товарів на основі категорії
  const products = await fetchProducts(category);

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

export default function Products({ products }) {
  return (
    <div>
      <h1>Рекомендації товарів</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Замініть на вашу реальну логіку отримання товарів
  return [
    { id: 1, name: `Товар 1 (${category})` },
    { id: 2, name: `Товар 2 (${category})` },
  ];
}

Цей приклад використовує заголовок x-vercel-ip-country для визначення країни користувача. Цей заголовок автоматично додається Vercel. Важливо зазначити, що покладання виключно на геолокацію за IP-адресою не завжди може бути точним. Розгляньте використання інших методів, таких як надане користувачем місцезнаходження або більш складні сервіси геолокації для підвищення точності.

Географічна маршрутизація з Edge Config

Ви можете направляти користувачів на різні ресурси залежно від їхнього місцезнаходження за допомогою Edge Config. Це корисно для надання локалізованого контенту або дотримання регіональних правил.

  1. Створіть Edge Config з ключем countryToRedirectMap.
  2. Встановіть значення у вигляді JSON-об'єкта, який зіставляє країни з URL-адресами (наприклад, {"CN": "/china", "DE": "/germany"}).
  3. У вашій Edge Function зчитайте значення countryToRedirectMap.
  4. Визначте країну користувача (наприклад, за його IP-адресою).
  5. Перенаправте користувача на відповідну 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'; // За замовчуванням US
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Цей приклад використовує властивість req.geo.country, яка автоматично заповнюється мережею Vercel Edge Network кодом країни користувача. Це більш чистий і надійний підхід, ніж прямий парсинг заголовка x-vercel-ip-country. Функція middleware перевіряє, чи визначена URL-адреса для перенаправлення для країни користувача в Edge Config. Якщо так, вона перенаправляє користувача на цю URL-адресу. В іншому випадку вона продовжує обробку запиту.

Обмеження запитів (Rate Limiting) з Edge Config

Хоча Edge Config не призначений для повноцінного рішення з обмеження запитів, ви можете використовувати його в поєднанні з іншими методами для реалізації базового обмеження. Ідея полягає в тому, щоб зберігати параметри обмеження (наприклад, кількість запитів на хвилину) в Edge Config, а потім використовувати ці параметри у ваших Edge Functions для застосування обмежень.

Важливе зауваження: Цей підхід підходить для простих сценаріїв обмеження запитів. Для більш надійного обмеження розгляньте використання спеціалізованих сервісів або middleware.

  1. Створіть Edge Config з ключами, такими як requestsPerMinute та blockedIps.
  2. Встановіть значення requestsPerMinute на бажане обмеження.
  3. Встановіть значення blockedIps на масив IP-адрес, які слід заблокувати.
  4. У вашій Edge Function зчитайте значення requestsPerMinute та blockedIps.
  5. Перевірте, чи є IP-адреса користувача в масиві blockedIps. Якщо так, заблокуйте запит.
  6. Використовуйте механізм кешування (наприклад, Redis або Vercel's Edge Cache) для відстеження кількості запитів з кожної IP-адреси за останню хвилину.
  7. Якщо кількість запитів з IP-адреси користувача перевищує ліміт requestsPerMinute, заблокуйте запит.

Приклад (ілюстративний - вимагає додаткової реалізації для кешування):

// 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 користувача

  // Перевірка, чи заблоковано IP
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Реалізувати підрахунок запитів та кешування (наприклад, за допомогою Redis або Vercel Edge Cache)
  // Приклад (концептуальний):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Ваша логіка захищеного маршруту тут
  res.status(200).send('Доступ до захищеного маршруту успішний!');
}

Важливі міркування щодо обмеження запитів:

Найкращі практики використання Edge Config

Альтернативи Edge Config

Хоча Edge Config є потужним інструментом, він не завжди є найкращим рішенням для кожного випадку використання. Ось деякі альтернативи, які варто розглянути:

Висновок

Next.js Edge Config — це потужний інструмент для управління та глобального розповсюдження конфігурації на межі мережі. Використовуючи Edge Config, ви можете оптимізувати продуктивність вашого додатку, надавати персоналізований досвід та спростити робочий процес управління конфігурацією. Незалежно від того, чи створюєте ви глобальний сайт електронної комерції, соціальну мережу чи будь-який інший тип веб-додатку, Edge Config може допомогти вам забезпечити швидкий та захоплюючий досвід для ваших користувачів по всьому світу. Досліджуйте можливості та інтегруйте Edge Config у свої проєкти Next.js вже сьогодні, щоб розкрити його потенціал!