M

MLOG

ไทย

สำรวจ Next.js Edge Config: โซลูชันทรงพลังสำหรับการกระจายการตั้งค่าทั่วโลกด้วยความเร็วและประสิทธิภาพ เรียนรู้วิธีเพิ่มประสิทธิภาพแอปพลิเคชันของคุณด้วยการกำหนดค่าแบบไดนามิกที่ Edge

Next.js Edge Config: การกระจายการตั้งค่าทั่วโลกที่ง่ายดาย

ในภูมิทัศน์การพัฒนาเว็บที่รวดเร็วในปัจจุบัน การมอบประสบการณ์ที่เป็นส่วนตัวและไดนามิกให้กับผู้ใช้ทั่วโลกถือเป็นสิ่งสำคัญ Next.js ซึ่งเป็นเฟรมเวิร์ก React ที่ได้รับความนิยม นำเสนอโซลูชันที่แข็งแกร่งสำหรับการสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพและปรับขนาดได้ หนึ่งในคุณสมบัติหลักคือ 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. ติดตั้ง Edge Config SDK

ติดตั้ง @vercel/edge-config SDK ในโปรเจกต์ Next.js ของคุณ:

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

4. กำหนดค่า Environment Variables

คุณจะต้องกำหนดค่าตัวแปรสภาพแวดล้อม EDGE_CONFIG คุณสามารถหาค่าของตัวแปรนี้ได้ในแดชบอร์ด Vercel สำหรับ Edge Config ของคุณ เพิ่มลงในไฟล์ .env.local ของคุณ (หรือการตั้งค่าโปรเจกต์ Vercel ของคุณสำหรับ production):

EDGE_CONFIG=your_edge_config_url

สำคัญ: อย่าคอมมิตไฟล์ .env.local ของคุณไปยัง repository ใช้การตั้งค่าตัวแปรสภาพแวดล้อมของ Vercel สำหรับสภาพแวดล้อม production

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 ที่ครอบคลุม

ฟีเจอร์แฟล็กด้วย Edge Config

ฟีเจอร์แฟล็กช่วยให้คุณสามารถเปิดหรือปิดใช้งานฟีเจอร์ได้โดยไม่ต้อง deploy โค้ดใหม่ ซึ่งมีประโยชน์สำหรับการทดสอบฟีเจอร์ใหม่ใน production หรือการเปิดตัวฟีเจอร์อย่างค่อยเป็นค่อยไปให้กับกลุ่มผู้ใช้ย่อย เช่นเดียวกับการทดสอบ 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 หรือคุกกี้)
  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 Network ของ Vercel ซึ่งเป็นวิธีที่สะอาดและเชื่อถือได้มากกว่าการแยกวิเคราะห์เฮดเดอร์ x-vercel-ip-country โดยตรง ฟังก์ชัน middleware จะตรวจสอบว่ามี URL เปลี่ยนเส้นทางที่กำหนดไว้สำหรับประเทศของผู้ใช้ใน Edge Config หรือไม่ ถ้ามี มันจะเปลี่ยนเส้นทางผู้ใช้ไปยัง URL นั้น มิฉะนั้น มันจะดำเนินการตามคำขอต่อไป

การจำกัดอัตราด้วย 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 หรือ Edge Cache ของ Vercel) เพื่อติดตามจำนวนคำขอจากแต่ละที่อยู่ 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 ของคุณวันนี้เพื่อปลดล็อกศักยภาพของมัน!