Cara menginternasionalisasi aplikasi Next.js Anda menggunakan next-intl pada tahun 2026

.├── global.ts├── locales│   ├── en│   │  ├── common.json│   │  └── about.json│   ├── fr│   │  ├── common.json│   │  └── about.json│   └── es│      ├── common.json│      └── about.json└── src # Src adalah opsional    ├── proxy.ts    ├── app    │   ├── i18n.ts    │   └── [locale]    │       ├── layout.tsx    │       ├── (home) # / (Grup Rute untuk tidak mencemari semua halaman dengan sumber daya home)    │       │   ├── layout.tsx    │       │   └── page.tsx    │       └── about # /about    │           ├── layout.tsx    │           └── page.tsx    └── components        ├── ClientComponent.tsx        └── ServerComponent.tsx

npm install next-intl

import { notFound } from "next/navigation";import createMiddleware from "next-intl/middleware";import { createNavigation } from "next-intl/navigation";// Mendefinisikan locale yang didukung dengan keamanan tipeexport const locales = ["en", "fr", "es"] as const;export type Locale = (typeof locales)[number];export const defaultLocale: Locale = "en";export function isRTL(locale: Locale | (string & {})) {  return /^(ar|fa|he|iw|ur|ps|sd|ug|yi|ckb|ku)(-|$)/i.test(locale);}// Memuat pesan secara dinamis per locale untuk memungkinkan pemisahan kode// Promise.all memuat namespace secara paralel untuk kinerja yang lebih baikasync function loadMessages(locale: Locale) {  // Hanya memuat namespace yang dibutuhkan oleh layout/halaman Anda  const [common, home, about] = await Promise.all([    import(`../locales/${locale}/common.json`).then((m) => m.default),    import(`../locales/${locale}/home.json`).then((m) => m.default),    import(`../locales/${locale}/about.json`).then((m) => m.default),    // ... File JSON masa depan harus ditambahkan di sini  ]);  return { common, home, about } as const;}// Helper untuk menghasilkan URL yang dilokalkan (misalnya, /about vs /fr/about)export function localizedPath(locale: string, path: string) {  return locale === defaultLocale ? path : `/${locale}${path}`;}// getRequestConfig dijalankan pada setiap permintaan dan menyediakan pesan ke komponen server// Di sinilah next-intl terhubung ke rendering sisi server Next.jsexport default async function getRequestConfig({  requestLocale,}: {  requestLocale: Promise<string | undefined>;}) {  const requested: Locale = ((await requestLocale) as Locale) ?? defaultLocale;  if (!locales.includes(requested)) notFound();  return {    locale: requested,    messages: await loadMessages(requested),  };}export function getCookie(locale: Locale) {  return [    `NEXT_LOCALE=${locale}`,    "Path=/",    `Max-Age=${60 * 60 * 24 * 365}`, // 1 tahun    "SameSite=Lax",  ].join("; ");}const routingOptions = {  locales,  defaultLocale,  localePrefix: "as-needed", // Ubah rute /en/... menjadi /...  // Opsional: pathnames yang dilokalkan  // pathnames: {  //   '/': '/',  //   '/about': {en: '/about', fr: '/a-propos', es: '/acerca-de'},  //   '/blog/[slug]': '/blog/[slug]'  // }  //  localeDetection: true, // mencegah pengalihan "/" -> "/en" dari cookie} as const;export const { Link, redirect, usePathname, useRouter, getPathname } =  createNavigation(routingOptions);export const proxy = createMiddleware(routingOptions);

import type { ReactNode } from "react";import { locales } from "@/i18n";import { getLocaleDirection, setRequestLocale } from "next-intl/server";// Pra-hasilkan halaman statis untuk semua locale saat build time (SSG)// Ini meningkatkan performa dan SEOexport function generateStaticParams() {  return locales.map((locale) => ({ locale }));}export default function LocaleLayout({  children,  params,}: {  children: ReactNode;  params: Promise<{ locale: string }>;}) {  // Dalam Next.js App Router, params adalah Promise (dapat di-await)  // Ini memungkinkan segmen rute dinamis diselesaikan secara asinkron  const { locale } = await params;  // Penting: setRequestLocale memberi tahu next-intl locale mana yang digunakan untuk permintaan ini  // Tanpa ini, getTranslations() tidak akan tahu locale mana yang digunakan di komponen server  setRequestLocale(locale);  // Dapatkan arah teks (LTR/RTL) untuk rendering HTML yang tepat  const dir = getLocaleDirection(locale);  return (    <html lang={locale} dir={dir}>      <body>{children}</body>    </html>  );}

import { getTranslations, getMessages, getFormatter } from "next-intl/server";import { NextIntlClientProvider } from "next-intl";import pick from "lodash/pick";import ServerComponent from "@/components/ServerComponent";import ClientComponent from "@/components/ClientComponent";export default async function AboutPage({  params,}: {  params: Promise<{ locale: string }>;}) {  const { locale } = await params;  // Pesan dimuat di sisi server. Kirim hanya yang dibutuhkan ke klien.  // Ini meminimalkan bundle JavaScript yang dikirim ke browser  const messages = await getMessages();  const clientMessages = pick(messages, ["common", "about"]);  // Terjemahan/formatting yang hanya dijalankan di sisi server  // Ini dijalankan di server dan dapat diteruskan sebagai props ke komponen  const tAbout = await getTranslations("about");  const tCounter = await getTranslations("about.counter");  const format = await getFormatter();  const initialFormattedCount = format.number(0);  return (    // NextIntlClientProvider membuat terjemahan tersedia untuk komponen klien    // Hanya teruskan namespace yang benar-benar digunakan oleh komponen klien Anda    <NextIntlClientProvider locale={locale} messages={clientMessages}>      <main>        <h1>{tAbout("title")}</h1>        <ClientComponent />        <ServerComponent          formattedCount={initialFormattedCount}          label={tCounter("label")}          increment={tCounter("increment")}        />      </main>    </NextIntlClientProvider>  );}

{  "welcome": "Welcome",  "greeting": "Hello, world!"}

{  "welcome": "Bienvenue",  "greeting": "Bonjour le monde!"}

{  "title": "About",  "description": "About page description",  "counter": {    "label": "Counter",    "increment": "Increment"  }}

{  "title": "À propos",  "description": "Description de la page À propos",  "counter": {    "label": "Compteur",    "increment": "Incrémenter"  }}

import { getTranslations, getMessages, getFormatter } from "next-intl/server";import { NextIntlClientProvider } from "next-intl";import pick from "lodash/pick";import ServerComponent from "@/components/ServerComponent";import ClientComponent from "@/components/ClientComponent";export default async function AboutPage({  params,}: {  params: Promise<{ locale: string }>;}) {  const { locale } = await params;  // Pesan dimuat di sisi server. Kirim hanya yang diperlukan ke klien.  // Ini meminimalkan bundle JavaScript yang dikirim ke browser  const messages = await getMessages();  const clientMessages = pick(messages, ["common", "about"]);  // Terjemahan/formatting yang benar-benar di sisi server  // Ini dijalankan di server dan dapat diteruskan sebagai props ke komponen  const tAbout = await getTranslations("about");  const tCounter = await getTranslations("about.counter");  const format = await getFormatter();  const initialFormattedCount = format.number(0);  return (    // NextIntlClientProvider membuat terjemahan tersedia untuk komponen klien    // Hanya kirim namespace yang benar-benar digunakan oleh komponen klien Anda    <NextIntlClientProvider locale={locale} messages={clientMessages}>      <main>        <h1>{tAbout("title")}</h1>        <ClientComponent />        <ServerComponent          formattedCount={initialFormattedCount}          label={tCounter("label")}          increment={tCounter("increment")}        />      </main>    </NextIntlClientProvider>  );}

"use client";import React, { useState } from "react";import { useTranslations, useFormatter } from "next-intl";const ClientComponent = () => {  // Scope langsung ke objek bersarang  // useTranslations/useFormatter adalah hook yang membaca dari konteks NextIntlClientProvider  // Mereka hanya berfungsi jika komponen dibungkus dalam NextIntlClientProvider  const t = useTranslations("about.counter");  const format = useFormatter();  const [count, setCount] = useState(0);  return (    <div>      <p>{format.number(count)}</p>      <button        aria-label={t("label")}        onClick={() => setCount((count) => count + 1)}      >        {t("increment")}      </button>    </div>  );};

// Komponen server yang disisipkan di dalam komponen klien harus bersifat sinkron// React tidak dapat menyerialisasi fungsi async melintasi batas server/klien// Solusi: pre-komputasi terjemahan/format di induk dan teruskan sebagai propstype ServerComponentProps = {  formattedCount: string;  label: string;  increment: string;};const ServerComponent = ({  formattedCount,  label,  increment,}: ServerComponentProps) => {  return (    <div>      <p>{formattedCount}</p>      <button aria-label={label}>{increment}</button>    </div>  );};

"use client";import Link from "next/link";import { usePathname } from "next/navigation";import { useLocale } from "next-intl";import { defaultLocale, getCookie, type Locale, locales } from "@/i18n";const getLocaleLabel = (locale: Locale): string => {  try {    const displayNames = new Intl.DisplayNames([locale], { type: "language" });    return displayNames.of(locale) ?? locale.toUpperCase();  } catch {    return locale.toUpperCase();  }};const localeFlags: Record<Locale, string> = {  en: "🇬🇧",  fr: "🇫🇷",  es: "🇪🇸",};export default function LocaleSwitcher() {  const activeLocale = useLocale();  const pathname = usePathname();  // Hapus prefix locale dari pathname untuk mendapatkan path dasar  const getBasePath = (path: string) => {    for (const locale of locales) {      if (path.startsWith(`/${locale}`)) {        return path.slice(locale.length + 1) || "/";      }    }    return path;  };  const basePath = getBasePath(pathname);  return (    <nav aria-label="Pemilih bahasa">      <div>        {(locales as readonly Locale[]).map((locale) => {          const isActive = locale === activeLocale;          // Bangun href berdasarkan apakah ini locale default          const href =            locale === defaultLocale ? basePath : `/${locale}${basePath}`;          return (            <Link              key={locale}              href={href}              aria-current={isActive ? "page" : undefined}              onClick={() => {                document.cookie = getCookie(locale);              }}            >              <span>{localeFlags[locale]}</span>              <span>{getLocaleLabel(locale)}</span>              <span>{locale.toUpperCase()}</span>            </Link>          );        })}      </div>    </nav>  );}

import { Link } from "@/i18n";return <Link href="/about">t("about.title")</Link>;

"use server";import { getLocale } from "next-intl/server";export async function getCurrentLocale() {  return getLocale();}export async function handleContactForm(formData: FormData) {  const locale = await getCurrentLocale();  // Gunakan locale untuk memilih template, label analitik, dll.  console.log(`Menerima formulir kontak dari locale ${locale}`);}

import type { Metadata } from "next";import { locales, defaultLocale, localizedPath } from "@/i18n";import { getTranslations } from "next-intl/server";// generateMetadata berjalan untuk setiap locale, menghasilkan metadata yang ramah SEO// Ini membantu mesin pencari memahami versi bahasa alternatifexport async function generateMetadata({  params,}: {  params: { locale: string };}): Promise<Metadata> {  const { locale } = params;  const t = await getTranslations({ locale, namespace: "about" });  const url = "/about";  const languages = Object.fromEntries(    locales.map((locale) => [locale, localizedPath(locale, url)])  );  return {    title: t("title"),    description: t("description"),    alternates: {      canonical: localizedPath(locale, url),      languages: { ...languages, "x-default": url },    },  };}// ... Sisa kode halaman

import type { MetadataRoute } from "next";import { defaultLocale, locales } from "@/i18n";const origin = "https://example.com";const formatterLocalizedPath = (locale: string, path: string) =>  locale === defaultLocale ? `${origin}${path}` : `${origin}/${locale}${path}`;/** * Dapatkan peta semua locale dan path lokalnya * * Contoh output: * { *   "en": "https://example.com", *   "fr": "https://example.com/fr", *   "es": "https://example.com/es", *   "x-default": "https://example.com" * } */const getLocalizedMap = (path: string) =>  Object.fromEntries([    ...locales.map((locale) => [locale, formatterLocalizedPath(locale, path)]),    ["x-default", formatterLocalizedPath(defaultLocale, path)],  ]);// Menghasilkan sitemap dengan semua varian locale untuk SEO yang lebih baik// Field alternates memberi tahu mesin pencari tentang versi bahasaexport default function sitemap(): MetadataRoute.Sitemap {  return [    {      url: formatterLocalizedPath(defaultLocale, "/"),      lastModified: new Date(),      changeFrequency: "monthly",      priority: 1.0,      alternates: { languages: getLocalizedMap("/") },    },    {      url: formatterLocalizedPath(defaultLocale, "/about"),      lastModified: new Date(),      changeFrequency: "monthly",      priority: 0.7,      alternates: { languages: getLocalizedMap("/about") },    },  ];}

import type { MetadataRoute } from "next";import { locales, defaultLocale } from "@/i18n";const origin = "https://example.com";// Menghasilkan path untuk semua locale (misalnya, /admin, /fr/admin, /es/admin)const withAllLocales = (path: string) => [  path,  ...locales    .filter((locale) => locale !== defaultLocale)    .map((locale) => "/" + locale + path),];export default function robots(): MetadataRoute.Robots {  const disallow = [    ...withAllLocales("/dashboard"),    ...withAllLocales("/admin"),  ];  return {    rules: { userAgent: "*", allow: ["/"], disallow },    host: origin,    sitemap: origin + "/sitemap.xml",  };}

import { proxy } from "@/i18n";// Middleware berjalan sebelum rute, menangani deteksi locale dan routing// localeDetection: true menggunakan header Accept-Language untuk mendeteksi locale secara otomatisexport default proxy;export const config = {  // Lewati API, internal Next, dan aset statis  // Regex: mencocokkan semua rute kecuali yang dimulai dengan api, _next, atau yang mengandung titik (file)  matcher: ["/((?!api|_next|.*\\..*).*)"],};

import type { locales } from "@/i18n";type Messages = {  common: typeof import("./locales/en/common.json");  home: typeof import("./locales/en/home.json");  about: typeof import("./locales/en/about.json");  // ... File JSON masa depan juga harus ditambahkan di sini};declare module "next-intl" {  interface AppConfig {    Locale: (typeof locales)[number];    Messages: Messages;  }}