Belajar Routing i18n next-intl di Next.js untuk Pemula

export const routing = defineRouting({
  locales,
  defaultLocale: "en",
  localePrefix: "always",
  // Locale is always in the URL path, so the NEXT_LOCALE cookie is redundant.
  // Disabling it removes the per-response Set-Cookie that blocks Cloudflare
  // from edge-caching the static HTML.
  localeCookie: false,

  // Every page already emits hreflang in <head> via `alternates.languages`
  // (see buildLanguageAlternates in lib/seo.ts). Leaving this on made the
  // middleware emit a SECOND set as an HTTP Link header whose x-default
  // pointed at the unprefixed "/blog/<slug>/" — a URL that 307-redirects,
  // and a different target from the "/en/blog/<slug>/" in the HTML. Google
  // may discard hreflang entirely when the annotations conflict, which on a
  // bilingual site risks losing the en/id pairing.
  alternateLinks: false,
});

Seluruh kontrak routing. localePrefix always berarti /en/... dan /id/..., tidak pernah path polos. Cookie dimatikan karena locale sudah ada di URL, dan Set-Cookie di tiap respons menghalangi caching di edge. alternateLinks dimatikan karena HTML sudah membawa hreflang.

export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale;

  // Ensure that a valid locale is used
  if (!locale || !routing.locales.includes(locale as any)) {
    locale = routing.defaultLocale;
  }

  return {
    locale,
    messages: (await import(`../messages/${locale}.json`)).default,
  };
});

Konfigurasi per request. requestLocale adalah promise, jadi di-await, dan nilai tidak valid jatuh ke default. Import dinamis hanya memuat messages untuk locale itu. Dokumentasi next-intl terbaru menandai requestLocale sebagai legacy dan menyarankan argumen locale, dan situs ini belum bermigrasi.

import { createNavigation } from 'next-intl/navigation';
import { routing } from './routing';

export const { Link, redirect, usePathname, useRouter, getPathname } =
  createNavigation(routing);

Satu-satunya tempat kelima pembungkus ini dibuat. Setiap Link, useRouter, dan usePathname di situs diimpor dari sini, bukan dari next/link atau next/navigation, sehingga semuanya membawa locale.

  const { locale } = await params;
  setRequestLocale(locale);
  const pageLocale = asSiteLocale(locale);

  const t = await getTranslations({ locale, namespace: "aboutPage" });

Halaman async Server Component. Ia menyetel locale request lebih dulu, lalu await getTranslations dengan namespace. Hook tidak diizinkan di sini. Header, sebuah Client Component, memakai versi hook, useTranslations dengan namespace nav.

export function generateStaticParams() {
  return routing.locales.map((locale) => ({ locale }));
}

Satu entri per locale, sehingga segmen [locale] di-prerender untuk en dan id. Tepat di bawahnya di file yang sama, export const dynamicParams = false mengubah setiap locale lain menjadi 404 sebelum apa pun dirender.

export function buildLanguageAlternates(path = ""): Record<string, string> {
  return {
    en: buildCanonical("en", path),
    id: buildCanonical("id", path),
    "x-default": buildCanonical("en", path),
  };
}

Satu-satunya sumber hreflang. Tiga URL absolut untuk setiap halaman, dan x-default menunjuk ke bahasa Inggris. Halaman meneruskannya ke alternates.languages, yang dirender Next.js sebagai tag link di head.