Cara Membuat Multibahasa (i18n) Aplikasi Next.js yang Sudah Ada Setelahnya (Panduan i18n 2026)

Menambahkan internasionalisasi (i18n) ke proyek Next.js sejak awal relatif mudah. Namun bagaimana jika Anda sudah memiliki aplikasi Next.js produksi yang matang dalam satu bahasa dan harus menjadikannya multibahasa setelahnya?

Dengan pustaka tradisional seperti next-intl atau next-i18next, ini adalah mimpi buruk:

• Mencari string teks hardcode di ratusan file JSX/TSX.
• Membuat file JSON bertingkat dan mengarang kunci terjemahan (pages.dashboard.header.title).
• Mengganti teks dengan pemanggilan hook (t('...')).
• Mengubah struktur app/ menjadi app/[locale]/..., yang merusak URL yang sudah ada dan SEO.

Di tahun 2026, Anda tidak perlu menulis ulang kode Anda. Bersama Intlayer, Anda dapat mengintegrasikan i18n dalam hitungan menit menggunakan ekstraksi otomatis, terjemahan AI, dan perutean non-invasif.

Mencari panduan teknis langkah demi langkah untuk Next.js 16 App Router? Lihat dokumentasi kami: Terjemahkan Next.js 16 dengan Intlayer.

Daftar Isi

Dilema Retrofit: Mengapa Menambahkan i18n pada Aplikasi yang Ada Begitu Sulit

Tiga tantangan utama:

1. Kerusakan Basis Kode: Memindahkan teks ke kamus JSON mengharuskan modifikasi hampir setiap komponen.
2. Keterikatan Routing: Pustaka i18n lama memaksa Anda memindahkan halaman ke segmen dinamis [locale].
3. Pekerjaan Terjemahan yang Melelahkan: Menyalin dan menerjemahkan kamus ke banyak bahasa.

Intlayer menyelesaikan semua ini dengan ekstraksi berbantuan kompilator, kamus deklaratif, dan routing fleksibel.

Ekstraksi Konten Otomatis (Tanpa Pencarian Manual)

Opsi A: Ekstraktor CLI (npx intlayer extract)

Jalankan alat ekstraksi Intlayer langsung di kode Anda:

npx intlayer extract

Perintah ini akan membuat file deklarasi (.content.ts) tepat di samping komponen Anda.

Opsi B: Kompilator Intlayer (Ekstraksi Saat Build)

Tulis teks biasa di komponen Anda. Saat build, kompilator mengekstrak teks dan menyuntikkan konten terlokalisasi:

// Write normal React code. The compiler extracts the text automatically
export default function HomePage() {
  return (
    <section>
      <h1>Welcome to our platform</h1>
      <p>Start exploring our modern features today.</p>
    </section>
  );
}

Di balik layar, Intlayer menyusun kamus dan menghubungkan komponen ke konten terlokalisasi, menghilangkan proses refaktor manual sepenuhnya.

Dalam hal ini, file src/app/page.content.ts akan dibuat dengan konten berikut:

import { Dictionary } from "intlayer";

const content = {
  key: "home-page",
  content: {
    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
    }),
  },
};

export default content;

Terjemahan AI dengan LLM Pilihan Anda

Terjemahkan dalam hitungan detik menggunakan OpenAI, Anthropic, DeepSeek, atau Mistral:

npx intlayer fill

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
    defaultLocale: Locales.ENGLISH,
  },
  ai: {
    provider: "openai",
    model: "gpt-4o-mini",
    apiKey: process.env.OPENAI_API_KEY,
    applicationContext: "Dashboard SaaS untuk produktivitas dan kolaborasi tim",
  },
};

export default config;

Menjalankan npx intlayer fill akan mengisi deklarasi .content.ts Anda dengan terjemahan untuk semua bahasa yang dikonfigurasi secara otomatis:

import { Dictionary } from "intlayer";

const content = {
  key: "home-page",
  content: {
    welcomeToOurPlatform: t({
      en: "Welcome to our platform",
      fr: "Bienvenue sur notre plateforme",
      es: "Bienvenido a nuestra plataforma",
      id: "Selamat Datang di Platform Kami",
    }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
      es: "Comience a explorar nuestras funciones modernas hoy.",
      id: "Mulai jelajahi fitur modern kami hari ini.",
    }),
  },
};

export default content;

Karena Intlayer memberikan applicationContext tingkat tinggi ke LLM, terjemahan yang dihasilkan mempertahankan nuansa teknis, gaya bahasa brand, dan konteks tata bahasa jauh lebih baik daripada alat otomatis konvensional.

Untuk memverifikasi bahwa tidak ada teks yang terlewat sebelum rilis ke produksi:

npx intlayer test

Routing Multibahasa Tanpa Merusak URL yang Ada

Intlayer mendukung:

• Mode Parameter / Cookie (search-params): Pertahankan struktur folder tanpa memindahkan apa pun ke [locale].
• Mode Awalan (prefix / prefix-all-locales): Dukungan penuh rute URL yang ramah SEO.

Konfigurasikan integrasi Next.js Anda dalam hitungan detik:

import type { NextConfig } from "next";
import { withIntlayer } from "next-intlayer/server";

const nextConfig: NextConfig = {/* Your existing Next.js config */};

export default withIntlayer(nextConfig);

Bungkus root layout Anda dengan IntlayerProvider:

import type { ReactNode } from "react";
import { IntlayerProvider } from "next-intlayer";
import { getLocale } from "next-intlayer/server";
import { getHTMLTextDir } from "intlayer";

export default async function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  const locale = await getLocale();

  return (
    <html lang={locale} dir={getHTMLTextDir(locale)}>
      <body>
        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
      </body>
    </html>
  );
}

SEO Multibahasa

Menghasilkan metadata lokal dan tag hreflang otomatis untuk visibilitas global:

import type { Metadata } from "next";
import { getLocale } from "next-intlayer/server";
import { getIntlayer } from "intlayer";

export const generateMetadata = async (): Promise<Metadata> => {
  const locale = await getLocale();
  const content = getIntlayer("home-page-metadata", locale);

  return {
    title: content.title,
    description: content.description,
  };
};

Pelajari Lebih Lanjut: Siap untuk Panduan Langkah demi Langkah?

Untuk panduan teknis lengkap termasuk middleware, SSG (generateStaticParams), dan Server Components, kunjungi dokumentasi resmi:

👉 Panduan Lengkap Menerjemahkan Next.js 16 dengan Intlayer

Pertanyaan yang Sering Diajukan (FAQ)