Tambahkan multibahasa ke aplikasi Next.js Anda.
Terjemahkan file lokal Anda, konten Markdown, dan halaman HTML melalui satu panggilan API. Bekerja dengan App Router, next-intl, dan pengaturan routing i18n apa pun.
Next.js memberi Anda routing. Tapi tidak memberi Anda terjemahan.
Next.js App Router memiliki dukungan bawaan yang sangat baik untuk routing berbasis lokal. Perpustakaan seperti next-intl memudahkan pengelolaan file terjemahan dan pergantian lokal. Namun yang tidak mereka selesaikan adalah terjemahannya sendiri — seseorang harus membuat konten terjemahan dalam setiap bahasa, dan biasanya orang itu adalah Anda. Untuk sebagian besar tim, alur kerjanya adalah menyalin JSON bahasa Inggris ke DeepL, memperbaiki format yang rusak, menempelkan hasilnya kembali, ulangi untuk setiap bahasa. Ini lambat, rawan kesalahan, dan tidak dapat diskalakan.
Alur kerja yang paling umum adalah menulis semua string UI dalam bahasa Inggris di dalam kode sumber, lalu menerjemahkan file messages.json untuk setiap bahasa target. Secara teori ini sederhana. Namun dalam praktiknya, menjaga lebih dari 10 file lokal tetap sinkron dengan perubahan sumber menjadi titik sakit yang berulang. Setiap kali salinan bahasa Inggris berubah, setiap file lokal perlu diperbarui. Saat menggunakan API terjemahan standar untuk ini, nama kunci bisa rusak, placeholder variabel diterjemahkan, dan struktur JSON menyimpang antar lokal — menyebabkan bug runtime halus yang sulit dilacak.
PolyLingo cocok dengan pengaturan i18n Next.js Anda yang sudah ada.
Jika Anda menggunakan next-intl atau perpustakaan i18n lainnya, pesan Anda sudah dalam format JSON. PolyLingo mengambil JSON itu, mengirimkannya melalui model terjemahan, dan mengembalikan salinan terjemahan untuk setiap bahasa target — dengan kunci tetap, struktur bersarang utuh, dan nilai string diterjemahkan dengan benar. Anda dapat memanggilnya dari skrip build, webhook, atau UI PolyLingo. Hasilnya langsung masuk ke direktori pesan Anda.
Alur kerja: tulis messages.json bahasa Inggris Anda. Jalankan satu skrip yang memanggil API PolyLingo dengan file sumber dan semua kode bahasa target. Terima satu file JSON terjemahan per bahasa, dengan struktur identik. Tulis masing-masing ke direktori messages/ Anda. Commit. Selesai.
Untuk situs dengan konten berat yang menggunakan Markdown di CMS (Sanity, Contentful), pendekatan yang sama berlaku untuk konten: ekspor sebagai Markdown atau HTML, terjemahkan, tulis kembali ke CMS melalui API-nya. Seluruh pipeline dapat dijalankan sebagai langkah build atau dipicu oleh webhook.
// This repository: frontend/scripts/translate-messages.mjs
// Chunks large namespaces (e.g. home) so the model stays within output limits.
//
// export POLYLINGO_API_KEY=pl_xxx
// npm run i18n:polylingo
//
// Writes messages/es.json, fr.json, … from messages/en.json via POST /v1/translate
// with format: "json". See MARKETING_I18N.md for options and CI notes.
//
// Minimal one-shot pattern (fine for small message files):
//
// const source = readFileSync('./messages/en.json', 'utf8')
// const { translations } = await fetch(apiUrl + '/translate', {
// method: 'POST',
// headers: { Authorization: `Bearer ${apiKey}`, 'Content-Type': 'application/json' },
// body: JSON.stringify({
// content: source, format: 'json', source: 'en',
// targets: ['es', 'fr', 'de'], model: 'standard',
// }),
// }).then((r) => r.json())
//
// for (const [lang, raw] of Object.entries(translations)) {
// const obj = typeof raw === 'string' ? JSON.parse(raw) : raw
// writeFileSync(`./messages/${lang}.json`, JSON.stringify(obj, null, 2))
// }// i18n.ts (next-intl v4)
import { getRequestConfig } from 'next-intl/server'
export const locales = [
'en', 'ar', 'bn', 'cs', 'da', 'de', 'el', 'es', 'fa', 'fi',
'fr', 'he', 'hi', 'id', 'it', 'ja', 'ko', 'ms', 'nl', 'no',
'pl', 'pt', 'ru', 'sv', 'sw', 'th', 'tr', 'uk', 'vi', 'zh',
] as const
export type Locale = (typeof locales)[number]
export default getRequestConfig(async ({ requestLocale }) => {
const locale = await requestLocale
return {
locale,
messages: (await import(`./messages/${locale}.json`)).default,
}
})// package.json
{
"scripts": {
"dev": "next dev",
"build": "next build",
"i18n:polylingo": "node scripts/translate-messages.mjs",
"translate:build": "npm run i18n:polylingo && next build"
}
}Mengapa PolyLingo cocok dengan alur kerja i18n Next.js
- ✓Terjemahkan file messages/*.json langsung — kunci selalu dipertahankan
- ✓Terjemahkan konten Markdown untuk posting blog dan halaman dokumentasi
- ✓Bekerja dengan next-intl, next-i18next, dan pengaturan kustom
- ✓REST API terintegrasi dengan skrip build dan webhook CMS
- ✓Semua 36 bahasa dalam satu permintaan
- ✓Tingkat gratis — 100.000 token per bulan
- ✓Repositori ini menggunakan alur kerja: npm run i18n:polylingo menghasilkan ulang lokal pemasaran dari messages/en.json (lihat MARKETING_I18N.md).
- ✓Bekerja dengan App Router dan Pages Router
- ✓File keluaran siap untuk commit — tidak perlu format ulang
Siapkan multibahasa di aplikasi Next.js Anda
Siapkan next-intl dengan file pesan bahasa Inggris Anda
Pasang next-intl dan konfigurasikan i18n.ts dan middleware Anda. Tulis semua string UI di messages/en.json. Struktur file sesuai kebutuhan aplikasi Anda — datar atau bersarang. Ini menjadi sumber kebenaran tunggal Anda.
Jalankan skrip terjemahan
Gunakan API JSON PolyLingo dari skrip Node kecil (lihat kode di atas). Dalam monorepo ini, jalankan npm run i18n:polylingo dari frontend/ dengan POLYLINGO_API_KEY disetel — ini memecah namespace besar untuk keandalan. Jalankan tipikal kurang dari satu menit untuk paket pemasaran lengkap.
Commit file lokal dan deploy
File lokal yang dihasilkan adalah JSON valid dengan struktur identik ke sumber Anda. Commit ke repositori Anda. Tambahkan skrip terjemahan ke pipeline CI Anda untuk menjaga lokal tetap sinkron dengan setiap perubahan konten.
Kasus penggunaan multibahasa Next.js
Aplikasi SaaS dan dashboard
Terjemahkan seluruh perpustakaan string UI Anda dalam satu kali jalankan skrip. Mendukung semua fitur format next-intl — tanggal, angka, jamak — karena struktur JSON dipertahankan persis.
Situs konten dan blog
Untuk situs Next.js dengan konten berat menggunakan Sanity atau Contentful, gunakan PolyLingo untuk menerjemahkan konten halaman serta string UI — API sama, jaminan pelestarian format sama.
E-commerce dengan varian regional
Terjemahkan nama produk, deskripsi, halaman kategori, dan UI checkout. Gunakan model Advanced untuk salinan pemasaran di mana suara merek penting, Standard untuk string UI fungsional.
Pertanyaan yang sering diajukan
Apakah ini bekerja dengan Next.js App Router?
Ya. Integrasi PolyLingo hanyalah skrip yang membaca dan menulis file JSON — tidak bergantung pada internal Next.js. Bekerja dengan App Router, Pages Router, atau framework apa pun. Contoh konfigurasi next-intl yang ditampilkan menggunakan API v4 dengan requestLocale, kompatibel dengan Next.js 13, 14, dan 15.
Bagaimana jika messages.json saya sering berubah?
Polanya yang direkomendasikan adalah menambahkan skrip terjemahan ke pipeline CI/CD Anda, dipicu saat ada perubahan pada messages/en.json. Ini menjaga semua file lokal tetap sinkron secara otomatis. Untuk tim dengan perubahan salinan yang sering, ini mencegah penyimpangan lokal sepenuhnya.
Apakah PolyLingo bekerja dengan next-i18next serta next-intl?
Ya. next-i18next menggunakan struktur JSON lokal yang sama. Skrip terjemahan bekerja identik — arahkan ke direktori public/locales/en/ Anda dan tulis keluaran ke direktori lokal lainnya. Kompatibilitas format JSON sama.
Bagaimana dengan konten dinamis yang tidak ada di file pesan?
Konten dinamis — posting blog, deskripsi produk, konten buatan pengguna — harus diterjemahkan di lapisan data, baik di CMS Anda atau melalui skrip build yang memproses konten sebelum mencapai Next.js. PolyLingo menangani Markdown, HTML, dan teks biasa dengan baik untuk tujuan ini.
Bisakah saya menerjemahkan hanya string yang berubah sejak terakhir dijalankan?
Terjemahan inkremental (hanya menerjemahkan kunci yang berubah) sedang dalam roadmap. Saat ini skrip menerjemahkan ulang seluruh file. Untuk sebagian besar file pesan (di bawah 20KB), ini cukup cepat untuk dijalankan pada setiap commit. Untuk file sangat besar, pemecahan berdasarkan namespace adalah pendekatan yang direkomendasikan.
Apakah ada cara untuk meninjau terjemahan sebelum diproduksi?
Polanya yang direkomendasikan adalah meng-commit file lokal terjemahan ke cabang atau PR terpisah untuk ditinjau sebelum digabung ke main. Ini praktik standar untuk tim yang membutuhkan tinjauan manusia atas kualitas terjemahan. PolyLingo menghasilkan terjemahan awal yang baik — untuk sebagian besar string UI, keluaran model Standard tidak memerlukan pengeditan.
Panduan terkait
Terjemahkan file JSON lokal
Bagaimana PolyLingo menangani struktur JSON, objek bersarang, dan variabel interpolasi.
Multibahasa untuk CMS headless
Menerjemahkan konten di tingkat CMS bersamaan dengan terjemahan string UI.
Terjemahkan Markdown tanpa merusak format
Untuk situs Next.js dengan posting blog Markdown atau halaman MDX.
Dapatkan file lokal pertama Anda diterjemahkan dalam waktu kurang dari 5 menit.
Kunci API gratis. Tanpa kartu kredit. Tempel JSON pesan Anda dan lihat hasilnya segera.
Dapatkan kunci API AndaSkrip terjemahan membutuhkan 5 menit untuk disiapkan. Tingkat gratis — tanpa kartu kredit.