Next.js + PolyLingo

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.

App Router
Didukung Next.js 13–15
next-intl
integrasi asli
10 bahasa
satu kali jalankan skrip
~3s
waktu eksekusi skrip terjemahan tipikal

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.

Skrip terjemahan PolyLingo — repositori ini menyertakan translate-messages.mjs
// 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 — konfigurasi next-intl v4
// 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 — tambahkan terjemahan ke pipeline build Anda
// 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

1

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.

2

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.

3

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.

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 Anda

Skrip terjemahan membutuhkan 5 menit untuk disiapkan. Tingkat gratis — tanpa kartu kredit.

Tambahkan multibahasa ke aplikasi Next.js Anda — PolyLingo | PolyLingo