Nextjs I18n Draft Mode Locale Routing Cms Preview

Definisi

i18n di Next.js mencakup routing berbasis locale (sub-path atau domain) dan pemilihan bahasa. Draft Mode adalah mekanisme untuk menonaktifkan static rendering sementara, sehingga konten draft dari CMS bisa dipreview sebelum dipublikasikan.

Kapan dipakai

• i18n: produk multi-bahasa dengan SEO per-locale (URL /en, /id).
• Draft Mode: halaman statis tapi butuh preview konten dari CMS headless (WordPress/Sanity) yang belum live.

Cara kerja

i18n routing

ts

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'id'],
    defaultLocale: 'id',
  },
};

Locale diteruskan lewat useRouter().locale dan getStaticProps({ locale }).

Draft Mode

ts

// app/api/draft/route.ts
import { draftMode } from 'next/headers';
 
export async function GET(req: Request) {
    const { searchParams } = new URL(req.url);
    if (searchParams.get('secret') !== process.env.DRAFT_SECRET) {
        return new Response('invalid', { status: 401 });
    }
    draftMode().enable();
    return new Response(null, { status: 307, headers: { Location: '/' } });
}

Saat draft mode aktif, halaman yang memakai fetch(..., { cache: 'no-store' }) atau revalidate = 0 akan mengambil data terbaru.

Mematikan

ts

draftMode().disable(); // via route handler logout draft

Struktur alur

Contoh fetch dengan draft awareness

ts

const isDraft = draftMode().isEnabled;
const res = await fetch(url, { cache: isDraft ? 'no-store' : 'force-cache' });

Catatan implementasi

• i18n App Router sekarang lebih disarankan pakai middleware + [lang] dynamic segment daripada config bawaan (config i18n lebih ke Pages Router).
• Draft Mode hanya berlaku untuk cookie session browser; bukan pengganti auth konten privat.
• Jangan ekspos DRAFT_SECRET di client.

Kesalahan umum

• Locale tidak di-pass ke fetch: konten selalu default meski URL berganti bahasa.
• Draft mode lupa di-disable: cookie menetap, produksi terus menampilkan data draft.
• Static cache ikut dipreview: tanpa no-store, preview malah membaca data lama.
• Secret di client: membuka akses preview ke siapa saja.

Referensi terkait

• Next.js Routing, Server/Client Components, Data Fetching
• Next.js Metadata, SEO, Route Groups, Layouts
• Next.js Static Generation, SSR, ISR, Dynamic Rendering