M

MLOG

Bahasa Indonesia

Jelajahi Next.js Edge Config: solusi andal untuk mendistribusikan konfigurasi secara global dengan cepat dan efisien. Pelajari cara mengoptimalkan aplikasi Anda dengan konfigurasi dinamis di edge.

Next.js Edge Config: Distribusi Konfigurasi Global Menjadi Mudah

Dalam lanskap pengembangan web yang serba cepat saat ini, memberikan pengalaman yang dipersonalisasi dan dinamis kepada pengguna di seluruh dunia sangatlah penting. Next.js, sebuah kerangka kerja React yang populer, menawarkan solusi yang tangguh untuk membangun aplikasi web yang berkinerja tinggi dan dapat diskalakan. Salah satu fitur utamanya adalah Edge Config, alat yang ampuh untuk mengelola dan mendistribusikan konfigurasi secara global di edge. Postingan blog ini menyediakan panduan komprehensif untuk memahami dan memanfaatkan Next.js Edge Config untuk mengoptimalkan kinerja aplikasi Anda dan memberikan pengalaman yang disesuaikan untuk audiens global Anda.

Apa itu Next.js Edge Config?

Next.js Edge Config adalah penyimpanan key-value terdistribusi global dengan latensi rendah yang dirancang khusus untuk menyajikan data konfigurasi ke Next.js Edge Functions. Tidak seperti basis data atau API tradisional, Edge Config dioptimalkan untuk kecepatan dan efisiensi, memungkinkan Anda mengakses data konfigurasi dalam milidetik dari mana saja di dunia. Ini memungkinkan Anda untuk secara dinamis menyesuaikan perilaku aplikasi Anda berdasarkan nilai konfigurasi, tanpa mengorbankan kinerja.

Anggap saja ini sebagai file JSON yang direplikasi secara global yang dapat Anda kueri dengan sangat cepat dari Edge Functions. Ini membuatnya ideal untuk:

Mengapa Menggunakan Edge Config?

Berikut adalah manfaat utama menggunakan Next.js Edge Config:

Cara Memulai dengan Edge Config

Berikut adalah panduan langkah demi langkah untuk memulai dengan Next.js Edge Config:

1. Pengaturan Proyek

Pastikan Anda memiliki proyek Next.js. Jika tidak, buat proyek baru menggunakan:

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

2. Buat Edge Config

Anda memerlukan akun Vercel untuk menggunakan Edge Config. Setelah masuk, navigasikan ke proyek Vercel Anda dan buat Edge Config baru. Beri nama yang deskriptif.

3. Instal SDK Edge Config

Instal SDK @vercel/edge-config di proyek Next.js Anda:

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

4. Konfigurasi Variabel Lingkungan

Anda perlu mengkonfigurasi variabel lingkungan EDGE_CONFIG. Anda dapat menemukan nilai variabel ini di dasbor Vercel untuk Edge Config Anda. Tambahkan ke file .env.local Anda (atau pengaturan proyek Vercel Anda untuk produksi):

EDGE_CONFIG=your_edge_config_url

Penting: Jangan pernah melakukan commit file .env.local Anda ke repositori Anda. Gunakan pengaturan variabel lingkungan Vercel untuk lingkungan produksi.

5. Mengakses Nilai Konfigurasi dalam Kode Anda

Sekarang Anda dapat mengakses nilai Edge Config Anda di dalam kode Next.js. Berikut contohnya:

// 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>Fitur diaktifkan!</p> : <p>Fitur dinonaktifkan.</p>}
    </div>
  );
}

Dalam contoh ini, kita mengambil nilai featureFlag dan welcomeMessage dari Edge Config di getServerSideProps. Nilai-nilai ini kemudian diteruskan sebagai props ke komponen Home.

6. Memperbarui Nilai Konfigurasi

Anda dapat memperbarui nilai di Edge Config Anda melalui dasbor Vercel. Perubahan disebarkan secara global dalam hitungan milidetik.

Kasus Penggunaan Tingkat Lanjut dan Contoh

Pengujian A/B dengan Edge Config

Edge Config sangat cocok untuk pengujian A/B. Anda dapat mendefinisikan nilai konfigurasi yang menentukan versi aplikasi mana yang akan disajikan kepada pengguna. Sebagai contoh:

  1. Buat Edge Config dengan kunci bernama abTestGroup.
  2. Atur nilainya menjadi A atau B.
  3. Di dalam Edge Function Anda, baca nilai abTestGroup.
  4. Berdasarkan nilainya, sajikan konten versi A atau versi B.

Berikut contohnya:

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

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

  let content;
  if (abTestGroup === 'A') {
    content = 'Ini adalah versi A!';
  } else {
    content = 'Ini adalah versi B!';
  }

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

export default function Home({ content }) {
  return (
    <div>
      <h1>Tes A/B</h1>
      <p>{content}</p>
    </div>
  );
}

Anda dapat menggunakan alat analitik untuk melacak kinerja setiap versi dan menentukan versi mana yang berkinerja lebih baik. Pertimbangkan alat seperti Google Analytics, Amplitude, atau Mixpanel untuk pengumpulan dan analisis data pengujian A/B yang komprehensif.

Feature Flag dengan Edge Config

Feature flag memungkinkan Anda untuk mengaktifkan atau menonaktifkan fitur tanpa menerapkan kode baru. Ini berguna untuk menguji fitur baru di produksi atau meluncurkan fitur secara bertahap ke sebagian pengguna. Mirip dengan pengujian A/B, Anda dapat mengontrol ketersediaan fitur dengan flag boolean sederhana di Edge Config Anda.

  1. Buat Edge Config dengan kunci bernama newFeatureEnabled.
  2. Atur nilainya menjadi true atau false.
  3. Di dalam Edge Function Anda, baca nilai newFeatureEnabled.
  4. Berdasarkan nilainya, aktifkan atau nonaktifkan fitur baru tersebut.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>Fitur baru diaktifkan!</p> : <p>Fitur baru dinonaktifkan.</p>}
    </div>
  );
}

export default MyComponent;

Personalisasi dengan Edge Config

Anda dapat menggunakan Edge Config untuk mempersonalisasi konten dan pengalaman berdasarkan preferensi atau lokasi pengguna. Misalnya, Anda dapat menyimpan preferensi pengguna di basis data dan kemudian menggunakan Edge Config untuk menyajikan konten yang berbeda berdasarkan preferensi tersebut.

Skenario Contoh: Situs e-commerce global ingin menampilkan rekomendasi produk berdasarkan negara pengguna. Mereka dapat menggunakan Edge Config untuk memetakan negara ke kategori rekomendasi.

  1. Buat Edge Config dengan kunci bernama countryToCategoryMap.
  2. Atur nilainya ke objek JSON yang memetakan negara ke kategori produk (mis., {"US": "Elektronik", "GB": "Mode", "JP": "Barang Rumah Tangga"}).
  3. Di dalam Edge Function Anda, baca nilai countryToCategoryMap.
  4. Tentukan negara pengguna (mis., dari alamat IP atau cookie mereka).
  5. Gunakan countryToCategoryMap untuk menentukan kategori produk yang sesuai.
  6. Tampilkan rekomendasi produk dari kategori tersebut.
// 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 ke US
  const category = countryToCategoryMap[country] || 'General'; // Default ke Umum

  // Ambil rekomendasi produk berdasarkan kategori
  const products = await fetchProducts(category);

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

export default function Products({ products }) {
  return (
    <div>
      <h1>Rekomendasi Produk</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Ganti dengan logika pengambilan produk Anda yang sebenarnya
  return [
    { id: 1, name: `Produk 1 (${category})` },
    { id: 2, name: `Produk 2 (${category})` },
  ];
}

Contoh ini menggunakan header x-vercel-ip-country untuk menentukan negara pengguna. Header ini secara otomatis ditambahkan oleh Vercel. Penting untuk dicatat bahwa mengandalkan geolokasi berbasis IP saja mungkin tidak selalu akurat. Pertimbangkan untuk menggunakan metode lain seperti lokasi yang disediakan pengguna atau layanan geolokasi yang lebih canggih untuk akurasi yang lebih baik.

Perutean Geografis dengan Edge Config

Anda dapat mengarahkan pengguna ke sumber daya yang berbeda berdasarkan lokasi mereka. Ini berguna untuk menyajikan konten yang dilokalkan atau mematuhi peraturan regional.

  1. Buat Edge Config dengan kunci bernama countryToRedirectMap.
  2. Atur nilainya ke objek JSON yang memetakan negara ke URL (mis., {"CN": "/china", "DE": "/jerman"}).
  3. Di dalam Edge Function Anda, baca nilai countryToRedirectMap.
  4. Tentukan negara pengguna (mis., dari alamat IP mereka).
  5. Alihkan pengguna ke URL yang sesuai.
// 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 ke US
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Contoh ini menggunakan properti req.geo.country, yang secara otomatis diisi oleh Jaringan Edge Vercel dengan kode negara pengguna. Ini adalah pendekatan yang lebih bersih dan lebih andal daripada mengurai header x-vercel-ip-country secara langsung. Fungsi middleware memeriksa apakah ada URL pengalihan yang ditentukan untuk negara pengguna di Edge Config. Jika ya, ia akan mengalihkan pengguna ke URL tersebut. Jika tidak, ia akan melanjutkan pemrosesan permintaan.

Pembatasan Laju (Rate Limiting) dengan Edge Config

Meskipun Edge Config tidak dirancang untuk menjadi solusi pembatasan laju (rate limiting) yang lengkap, Anda dapat menggunakannya bersama dengan teknik lain untuk menerapkan pembatasan laju dasar. Idenya adalah menyimpan parameter pembatasan laju (mis., permintaan per menit) di Edge Config dan kemudian menggunakan parameter tersebut di Edge Functions Anda untuk memberlakukan batas laju.

Catatan Penting: Pendekatan ini cocok untuk skenario pembatasan laju sederhana. Untuk pembatasan laju yang lebih kuat, pertimbangkan untuk menggunakan layanan pembatasan laju khusus atau middleware.

  1. Buat Edge Config dengan kunci seperti requestsPerMinute dan blockedIps.
  2. Atur nilai requestsPerMinute ke batas laju yang diinginkan.
  3. Atur nilai blockedIps ke array alamat IP yang harus diblokir.
  4. Di dalam Edge Function Anda, baca nilai requestsPerMinute dan blockedIps.
  5. Periksa apakah alamat IP pengguna ada di dalam array blockedIps. Jika ya, blokir permintaan tersebut.
  6. Gunakan mekanisme caching (mis., Redis atau Vercel's Edge Cache) untuk melacak jumlah permintaan dari setiap alamat IP dalam satu menit terakhir.
  7. Jika jumlah permintaan dari alamat IP pengguna melebihi batas requestsPerMinute, blokir permintaan tersebut.

Contoh (Ilustratif - Memerlukan Implementasi Tambahan untuk Caching):

// 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; // Dapatkan IP pengguna

  // Periksa apakah IP diblokir
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Terlalu Banyak Permintaan');
  }

  // TODO: Implementasikan penghitungan permintaan dan caching (mis., menggunakan Redis atau Vercel Edge Cache)
  // Contoh (Konseptual):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Terlalu Banyak Permintaan');
  // }
  // await incrementRequestCount(ip);

  // Logika rute terproteksi Anda di sini
  res.status(200).send('Rute terproteksi berhasil diakses!');
}

Pertimbangan Penting untuk Pembatasan Laju:

Praktik Terbaik Menggunakan Edge Config

Alternatif untuk Edge Config

Meskipun Edge Config adalah alat yang ampuh, ini tidak selalu menjadi solusi terbaik untuk setiap kasus penggunaan. Berikut adalah beberapa alternatif untuk dipertimbangkan:

Kesimpulan

Next.js Edge Config adalah alat yang ampuh untuk mengelola dan mendistribusikan konfigurasi secara global di edge. Dengan memanfaatkan Edge Config, Anda dapat mengoptimalkan kinerja aplikasi, memberikan pengalaman yang dipersonalisasi, dan menyederhanakan alur kerja manajemen konfigurasi Anda. Baik Anda membangun situs e-commerce global, platform media sosial, atau jenis aplikasi web lainnya, Edge Config dapat membantu Anda memberikan pengalaman yang cepat dan menarik bagi pengguna Anda di seluruh dunia. Jelajahi kemungkinannya dan integrasikan Edge Config ke dalam proyek Next.js Anda hari ini untuk membuka potensinya!