Nextjs Edge Config Feature Flags Runtime Toggle Rollout

Definisi

Edge Config adalah key-value store rendah-latensi yang bisa dibaca dari Edge Runtime (middleware, edge functions) tanpa query database. Feature Flags adalah pola mengaktifkan/menonaktifkan fitur secara dinamis berdasarkan konfigurasi ini, tanpa redeploy.

Kapan dipakai

• Edge Config: butuh nilai (flag, allowlist, maintenance mode) di middleware yang harus cepat dan global.
• Feature Flags: rollout bertahap, A/B test, atau mematikan fitur saat incident tanpa deploy ulang.
• Jangan taruh secret di Edge Config (baca dari env); Edge Config untuk nilai non-rahasia.

Cara kerja

Baca di middleware

ts

import { get } from '@vercel/edge-config';
 
export async function middleware(req: NextRequest) {
    const maintenance = await get('maintenance_mode');
    if (maintenance) {
        return new Response('maintenance', { status: 503 });
    }
}

Feature flag sederhana

ts

const flags = await get('flags'); // { newCheckout: true }
if (flags?.newCheckout) {
    return <NewCheckout />;
}
return <OldCheckout />;

Tanpa Vercel

Bisa pakai env atau KV eksternal (Upstash, DynamoDB) dengan cache pendek; prinsipnya sama: baca di edge, dedupe, fallback aman.

Struktur alur

Contoh flag di server component

tsx

const enabled = await isFeatureOn('beta_search');
export default async function Page() {
    return enabled ? <BetaSearch /> : <Search />;
}

Catatan implementasi

• Edge Config bukan database; hanya untuk config kecil yang jarang berubah.
• Cache hasil baca (tau SDK sudah melakukannya) supaya tidak hit store tiap request.
• Selalu sediakan default saat Edge Config gagal dibaca, agar fitur tidak ikut mati.

Kesalahan umum

• Menaruh secret di Edge Config: harusnya di environment variables.
• Tanpa fallback: kalau store gagal, seluruh fitur error.
• Flag tidak bisa dimatikan cepat: tidak ada mekanisme runtime, harus deploy ulang.
• Terlalu sering baca: tiap request hit store tanpa cache, menambah latency.

Referensi terkait

• Next.js Middleware, Edge Runtime, Redirect/Rewrites
• Next.js Instrumentation, Middleware Auth, Edge vs Node
• Next.js Static Generation, SSR, ISR, Dynamic Rendering