M

MLOG

עברית

גלו את Next.js Edge Config: פתרון עוצמתי להפצת תצורה גלובלית במהירות וביעילות. למדו כיצד למטב את היישום שלכם עם תצורה דינמית ב-Edge.

Next.js Edge Config: הפצת תצורה גלובלית בקלות

בנוף פיתוח הווב המהיר של ימינו, אספקת חוויות מותאמות אישית ודינמיות למשתמשים ברחבי העולם היא קריטית. Next.js, פריימוורק ריאקט פופולרי, מציע פתרון חזק לבניית יישומי ווב בעלי ביצועים גבוהים ויכולת масштабируемость. אחד ממאפייניו המרכזיים הוא Edge Config, כלי רב עוצמה לניהול והפצת תצורה גלובלית ב-edge. פוסט בלוג זה מספק מדריך מקיף להבנה ושימוש ב-Next.js Edge Config כדי למטב את ביצועי היישום שלכם ולספק חוויות מותאמות לקהל הגלובלי שלכם.

מהו Next.js Edge Config?

Next.js Edge Config הוא מאגר key-value גלובלי עם זמן אחזור נמוך, שתוכנן במיוחד להגשת נתוני תצורה ל-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

תצטרכו חשבון Vercel כדי להשתמש ב-Edge Config. לאחר שנכנסתם, נווטו לפרויקט שלכם ב-Vercel וצרו Edge Config חדש. תנו לו שם תיאורי.

3. התקנת ה-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

4. הגדרת משתני סביבה

תצטרכו להגדיר את משתנה הסביבה EDGE_CONFIG. תוכלו למצוא את הערך של משתנה זה בלוח הבקרה של Vercel עבור ה-Edge Config שלכם. הוסיפו אותו לקובץ .env.local שלכם (או להגדרות פרויקט Vercel שלכם עבור סביבת ייצור):

EDGE_CONFIG=your_edge_config_url

חשוב: לעולם אל תעשו commit לקובץ .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>Feature is enabled!</p> : <p>Feature is disabled.</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. ב-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.

דגלי פיצ'רים (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>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. ב-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'; // 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. ב-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'; // 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, אשר מאוכלס אוטומטית על ידי רשת ה-Edge של Vercel עם קוד המדינה של המשתמש. זוהי גישה נקייה ואמינה יותר מאשר ניתוח ישיר של הכותרת x-vercel-ip-country. פונקציית ה-middleware בודקת אם יש כתובת URL להפניה המוגדרת עבור מדינת המשתמש ב-Edge Config. אם כן, היא מפנה את המשתמש לכתובת זו. אחרת, היא ממשיכה לעבד את הבקשה.

הגבלת קצב (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; // 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. על ידי מינוף Edge Config, תוכלו למטב את ביצועי היישום שלכם, לספק חוויות מותאמות אישית, ולפשט את זרימת העבודה של ניהול התצורה שלכם. בין אם אתם בונים אתר מסחר אלקטרוני גלובלי, פלטפורמת מדיה חברתית, או כל סוג אחר של יישום ווב, Edge Config יכול לעזור לכם לספק חוויה מהירה ומרתקת למשתמשים שלכם ברחבי העולם. גלו את האפשרויות ושילבו את Edge Config בפרויקטי Next.js שלכם עוד היום כדי לממש את הפוטנציאל שלו!