M

MLOG

العربية

استكشف Next.js Edge Config: حل قوي لتوزيع الإعدادات عالميًا بسرعة وكفاءة. تعلم كيفية تحسين تطبيقك باستخدام الإعدادات الديناميكية على الحافة.

Next.js Edge Config: توزيع الإعدادات العالمية أصبح سهلاً

في مشهد تطوير الويب سريع الخطى اليوم، يعد تقديم تجارب شخصية وديناميكية للمستخدمين في جميع أنحاء العالم أمرًا بالغ الأهمية. يقدم Next.js، وهو إطار عمل شهير لـ React، حلاً قويًا لبناء تطبيقات ويب عالية الأداء وقابلة للتطوير. إحدى ميزاته الرئيسية هي Edge Config، وهي أداة قوية لإدارة وتوزيع الإعدادات عالميًا على الحافة. يقدم هذا المقال دليلاً شاملاً لفهم واستخدام Next.js Edge Config لتحسين أداء تطبيقك وتقديم تجارب مخصصة لجمهورك العالمي.

ما هو Next.js Edge Config؟

Next.js Edge Config هو مخزن بيانات من نوع مفتاح-قيمة (key-value) موزع عالميًا وذو زمن وصول منخفض، مصمم خصيصًا لخدمة بيانات الإعدادات لدوال الحافة (Edge Functions) في Next.js. على عكس قواعد البيانات التقليدية أو واجهات برمجة التطبيقات (APIs)، تم تحسين Edge Config للسرعة والكفاءة، مما يتيح لك الوصول إلى بيانات الإعدادات في أجزاء من الثانية من أي مكان في العالم. يمكّنك هذا من تعديل سلوك تطبيقك ديناميكيًا بناءً على قيم الإعدادات، دون التضحية بالأداء.

فكر في الأمر كملف JSON مكرر عالميًا يمكنك الاستعلام عنه بسرعة لا تصدق من دوال الحافة. وهذا يجعله مثاليًا لـ:

لماذا نستخدم 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

ستحتاج إلى حساب Vercel لاستخدام Edge Config. بمجرد تسجيل الدخول، انتقل إلى مشروع Vercel الخاص بك وأنشئ Edge Config جديدًا. أعطه اسمًا وصفيًا.

3. تثبيت SDK الخاص بـ Edge Config

قم بتثبيت حزمة @vercel/edge-config SDK في مشروع Next.js الخاص بك:

npm install @vercel/edge-config
# or
yarn add @vercel/edge-config
# or
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. ثم يتم تمرير هذه القيم كـ props إلى مكون Home.

6. تحديث قيم الإعدادات

يمكنك تحديث القيم في Edge Config الخاص بك من خلال لوحة تحكم Vercel. يتم نشر التغييرات عالميًا في غضون أجزاء من الثانية.

حالات استخدام متقدمة وأمثلة

اختبار A/B باستخدام Edge Config

Edge Config مثالي لاختبار A/B. يمكنك تحديد قيمة تكوين تحدد أي إصدار من تطبيقك سيتم تقديمه للمستخدم. على سبيل المثال:

  1. أنشئ Edge Config بمفتاح يسمى abTestGroup.
  2. اضبط القيمة على A أو B.
  3. في دالة الحافة الخاصة بك، اقرأ قيمة 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. في دالة الحافة الخاصة بك، اقرأ قيمة 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. في دالة الحافة الخاصة بك، اقرأ قيمة 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'; // الافتراضي هو 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. في دالة الحافة الخاصة بك، اقرأ قيمة 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 برمز بلد المستخدم. هذا نهج أنظف وأكثر موثوقية من تحليل ترويسة x-vercel-ip-country مباشرة. تتحقق دالة الوسيط (middleware) مما إذا كان هناك عنوان URL لإعادة التوجيه محدد لبلد المستخدم في Edge Config. إذا كان الأمر كذلك، فإنه يعيد توجيه المستخدم إلى هذا العنوان. وإلا، فإنه يواصل معالجة الطلب.

تحديد المعدل (Rate Limiting) باستخدام 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; // الحصول على 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 الخاصة بك اليوم لإطلاق العنان لإمكاناته!