M

MLOG

فارسی

با Next.js Edge Config آشنا شوید: راه‌حلی قدرتمند برای توزیع پیکربندی به صورت سراسری با سرعت و کارایی. یاد بگیرید چگونه برنامه خود را با پیکربندی پویا در لبه بهینه کنید.

Next.js Edge Config: توزیع آسان پیکربندی سراسری

در چشم‌انداز پرشتاب توسعه وب امروزی، ارائه تجربیات شخصی‌سازی‌شده و پویا به کاربران در سراسر جهان بسیار حیاتی است. Next.js، یک فریم‌ورک محبوب React، راه‌حلی قدرتمند برای ساخت برنامه‌های وب با کارایی و مقیاس‌پذیری بالا ارائه می‌دهد. یکی از ویژگی‌های کلیدی آن Edge Config است، ابزاری قدرتمند برای مدیریت و توزیع پیکربندی به صورت سراسری در لبه (edge). این پست وبلاگ یک راهنمای جامع برای درک و استفاده از Next.js Edge Config برای بهینه‌سازی عملکرد برنامه و ارائه تجربیات متناسب با مخاطبان جهانی شما فراهم می‌کند.

Next.js Edge Config چیست؟

Next.js Edge Config یک ذخیره‌ساز کلید-مقدار (key-value) با توزیع سراسری و تأخیر کم است که به طور خاص برای ارائه داده‌های پیکربندی به توابع لبه (Edge Functions) Next.js طراحی شده است. برخلاف پایگاه‌های داده سنتی یا APIها، Edge Config برای سرعت و کارایی بهینه شده است و به شما امکان می‌دهد تا در چند میلی‌ثانیه از هر کجای دنیا به داده‌های پیکربندی دسترسی داشته باشید. این قابلیت به شما امکان می‌دهد تا رفتار برنامه خود را بر اساس مقادیر پیکربندی به صورت پویا تنظیم کنید، بدون اینکه عملکرد را فدا کنید.

آن را مانند یک فایل JSON در نظر بگیرید که به صورت سراسری تکثیر شده و می‌توانید با سرعت فوق‌العاده‌ای از توابع لبه به آن کوئری بزنید. این ویژگی آن را برای موارد زیر ایده‌آل می‌کند:

چرا از Edge Config استفاده کنیم؟

در اینجا مزایای کلیدی استفاده از Next.js Edge Config آورده شده است:

چگونه کار با Edge Config را شروع کنیم؟

در اینجا یک راهنمای گام به گام برای شروع کار با Next.js Edge Config آورده شده است:

۱. راه‌اندازی پروژه

اطمینان حاصل کنید که یک پروژه Next.js دارید. در غیر این صورت، یکی با استفاده از دستور زیر ایجاد کنید:

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

۲. ایجاد یک Edge Config

برای استفاده از Edge Config به یک حساب Vercel نیاز دارید. پس از ورود به سیستم، به پروژه Vercel خود بروید و یک Edge Config جدید ایجاد کنید. یک نام توصیفی به آن بدهید.

۳. نصب SDK مربوط به Edge Config

SDK @vercel/edge-config را در پروژه Next.js خود نصب کنید:

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

۴. پیکربندی متغیرهای محیطی

شما باید متغیر محیطی EDGE_CONFIG را پیکربندی کنید. مقدار این متغیر را می‌توانید در داشبورد Vercel برای Edge Config خود پیدا کنید. آن را به فایل .env.local خود (یا تنظیمات پروژه Vercel خود برای محیط پروداکشن) اضافه کنید:

EDGE_CONFIG=your_edge_config_url

مهم: هرگز فایل .env.local خود را به مخزن (repository) خود کامیت نکنید. از تنظیمات متغیرهای محیطی Vercel برای محیط‌های پروداکشن استفاده کنید.

۵. دسترسی به مقادیر پیکربندی در کد شما

اکنون می‌توانید به مقادیر 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>Feature is enabled!</p> : <p>Feature is disabled.</p>}
    </div>
  );
}

در این مثال، ما مقادیر featureFlag و welcomeMessage را از Edge Config در getServerSideProps واکشی می‌کنیم. سپس این مقادیر به عنوان props به کامپوننت Home ارسال می‌شوند.

۶. به‌روزرسانی مقادیر پیکربندی

شما می‌توانید مقادیر 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 = '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>
  );
}

شما می‌توانید از ابزارهای تحلیلی برای ردیابی عملکرد هر نسخه استفاده کنید و تعیین کنید کدام نسخه بهتر عمل می‌کند. ابزارهایی مانند Google Analytics، Amplitude یا Mixpanel را برای جمع‌آوری و تحلیل جامع داده‌های تست A/B در نظر بگیرید.

فلگ‌های ویژگی با Edge Config

فلگ‌های ویژگی به شما امکان می‌دهند تا ویژگی‌ها را بدون استقرار کد جدید فعال یا غیرفعال کنید. این برای آزمایش ویژگی‌های جدید در محیط پروداکشن یا ارائه تدریجی ویژگی‌ها به زیرمجموعه‌ای از کاربران مفید است. مشابه تست A/B، می‌توانید در دسترس بودن ویژگی را با یک فلگ بولین ساده در Edge Config خود کنترل کنید.

  1. یک Edge Config با کلیدی به نام newFeatureEnabled ایجاد کنید.
  2. مقدار آن را روی true یا false تنظیم کنید.
  3. در تابع لبه خود، مقدار newFeatureEnabled را بخوانید.
  4. بر اساس این مقدار، ویژگی جدید را فعال یا غیرفعال کنید.
// 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;

شخصی‌سازی با Edge Config

شما می‌توانید از Edge Config برای شخصی‌سازی محتوا و تجربیات بر اساس ترجیحات یا مکان کاربر استفاده کنید. به عنوان مثال، می‌توانید ترجیحات کاربر را در یک پایگاه داده ذخیره کرده و سپس از Edge Config برای ارائه محتوای متفاوت بر اساس آن ترجیحات استفاده کنید.

سناریوی مثال: یک سایت تجارت الکترونیک جهانی می‌خواهد توصیه‌های محصول را بر اساس کشور کاربر نمایش دهد. آنها می‌توانند از یک Edge Config برای نگاشت کشورها به دسته‌بندی‌های توصیه‌ها استفاده کنند.

  1. یک Edge Config با کلیدی به نام countryToCategoryMap ایجاد کنید.
  2. مقدار آن را روی یک شیء JSON تنظیم کنید که کشورها را به دسته‌بندی‌های محصول نگاشت می‌کند (مثلاً {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. در تابع لبه خود، مقدار countryToCategoryMap را بخوانید.
  4. کشور کاربر را تعیین کنید (مثلاً از آدرس IP یا یک کوکی).
  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'; // 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})` },
  ];
}

این مثال از هدر x-vercel-ip-country برای تعیین کشور کاربر استفاده می‌کند. این هدر به طور خودکار توسط Vercel اضافه می‌شود. مهم است توجه داشته باشید که اتکای صرف به موقعیت‌یابی جغرافیایی مبتنی بر IP ممکن است همیشه دقیق نباشد. برای بهبود دقت، استفاده از روش‌های دیگر مانند مکان ارائه‌شده توسط کاربر یا سرویس‌های موقعیت‌یابی جغرافیایی پیشرفته‌تر را در نظر بگیرید.

مسیریابی جغرافیایی با Edge Config

شما می‌توانید کاربران را بر اساس مکانشان با استفاده از Edge Config به منابع مختلف هدایت کنید. این برای ارائه محتوای محلی‌شده یا رعایت مقررات منطقه‌ای مفید است.

  1. یک Edge Config با کلیدی به نام countryToRedirectMap ایجاد کنید.
  2. مقدار آن را روی یک شیء JSON تنظیم کنید که کشورها را به URLها نگاشت می‌کند (مثلاً {"CN": "/china", "DE": "/germany"}).
  3. در تابع لبه خود، مقدار 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'; // Default to 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 با کد کشور کاربر پر می‌شود. این یک رویکرد تمیزتر و قابل اعتمادتر از تجزیه مستقیم هدر x-vercel-ip-country است. تابع میان‌افزار بررسی می‌کند که آیا URL هدایتی برای کشور کاربر در Edge Config تعریف شده است یا خیر. اگر چنین باشد، کاربر را به آن URL هدایت می‌کند. در غیر این صورت، پردازش درخواست را ادامه می‌دهد.

محدودیت نرخ درخواست با Edge Config

در حالی که Edge Config برای یک راه‌حل کامل محدودیت نرخ درخواست طراحی نشده است، شما می‌توانید از آن در کنار تکنیک‌های دیگر برای پیاده‌سازی محدودیت نرخ درخواست پایه استفاده کنید. ایده این است که پارامترهای محدودیت نرخ (مثلاً، درخواست در دقیقه) را در Edge Config ذخیره کرده و سپس از آن پارامترها در توابع لبه خود برای اعمال محدودیت‌ها استفاده کنید.

نکته مهم: این رویکرد برای سناریوهای ساده محدودیت نرخ درخواست مناسب است. برای محدودیت نرخ درخواست قوی‌تر، استفاده از سرویس‌های اختصاصی یا میان‌افزارها را در نظر بگیرید.

  1. یک Edge Config با کلیدهایی مانند requestsPerMinute و blockedIps ایجاد کنید.
  2. مقدار requestsPerMinute را روی حد نرخ مورد نظر تنظیم کنید.
  3. مقدار blockedIps را روی آرایه‌ای از آدرس‌های IP که باید مسدود شوند، تنظیم کنید.
  4. در تابع لبه خود، مقادیر 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; // 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);

  // Your protected route logic here
  res.status(200).send('Protected route accessed successfully!');
}

ملاحظات مهم برای محدودیت نرخ درخواست:

بهترین شیوه‌ها برای استفاده از Edge Config

جایگزین‌های Edge Config

در حالی که Edge Config ابزار قدرتمندی است، همیشه بهترین راه‌حل برای هر مورد استفاده‌ای نیست. در اینجا چند جایگزین برای در نظر گرفتن وجود دارد:

نتیجه‌گیری

Next.js Edge Config ابزاری قدرتمند برای مدیریت و توزیع پیکربندی به صورت سراسری در لبه است. با بهره‌گیری از Edge Config، می‌توانید عملکرد برنامه خود را بهینه کنید، تجربیات شخصی‌سازی‌شده ارائه دهید و گردش کار مدیریت پیکربندی خود را ساده کنید. چه در حال ساخت یک سایت تجارت الکترونیک جهانی، یک پلتفرم رسانه اجتماعی یا هر نوع برنامه وب دیگری باشید، Edge Config می‌تواند به شما کمک کند تا تجربه‌ای سریع و جذاب را برای کاربران خود در سراسر جهان ارائه دهید. امکانات آن را کاوش کنید و امروز Edge Config را در پروژه‌های Next.js خود ادغام کنید تا پتانسیل آن را آزاد کنید!