Next.js + PolyLingo

Tambah pelbagai bahasa ke aplikasi Next.js anda.

Terjemahkan fail setempat anda, kandungan Markdown, dan halaman HTML melalui satu panggilan API. Berfungsi dengan App Router, next-intl, dan sebarang tetapan penghalaan i18n.

App Router
Sokongan Next.js 13–15
next-intl
integrasi asli
10 langs
satu larian skrip
~3s
masa larian skrip terjemahan biasa

Next.js memberikan anda penghalaan. Ia tidak memberikan anda terjemahan.

Next.js App Router mempunyai sokongan terbina dalam yang sangat baik untuk penghalaan berasaskan setempat. Perpustakaan seperti next-intl memudahkan pengurusan fail terjemahan dan penukaran setempat. Apa yang mereka tidak selesaikan adalah terjemahan itu sendiri — seseorang perlu menghasilkan kandungan yang diterjemah dalam setiap bahasa, dan biasanya orang itu adalah anda. Untuk kebanyakan pasukan, aliran kerja adalah menyalin JSON Bahasa Inggeris ke DeepL, membetulkan format yang rosak, tampal semula hasilnya, ulang untuk setiap bahasa. Ia perlahan, mudah berlaku kesilapan, dan tidak boleh diskala.

Aliran kerja yang paling biasa adalah menulis semua rentetan UI dalam Bahasa Inggeris di dalam kod sumber, kemudian menterjemah fail messages.json untuk setiap bahasa sasaran. Secara teori ini mudah. Dalam praktik, mengekalkan 10+ fail setempat selari dengan perubahan sumber menjadi titik kesakitan berulang. Setiap kali salinan Bahasa Inggeris berubah, setiap fail setempat perlu dikemas kini. Apabila menggunakan API terjemahan standard untuk ini, nama kekunci rosak, pemegang tempat pembolehubah diterjemah, dan struktur JSON berubah antara setempat — menyebabkan pepijat masa jalan halus yang sukar dijejaki.

PolyLingo sesuai dengan tetapan i18n Next.js anda yang sedia ada.

Jika anda menggunakan next-intl atau mana-mana perpustakaan i18n lain, mesej anda sudah dalam JSON. PolyLingo mengambil JSON itu, menghantarnya melalui model terjemahan, dan mengembalikan salinan terjemahan untuk setiap bahasa sasaran — dengan kekunci tidak disentuh, penempatan kekal, dan nilai rentetan diterjemah dengan betul. Anda boleh memanggilnya dari skrip binaan, webhook, atau UI PolyLingo. Keputusan terus dimasukkan ke dalam direktori mesej anda.

Aliran kerja: tulis messages.json Bahasa Inggeris anda. Jalankan satu skrip yang memanggil API PolyLingo dengan fail sumber dan semua kod bahasa sasaran. Terima satu fail JSON terjemahan setiap bahasa, dengan struktur yang sama. Tulis setiap satu ke direktori messages/ anda. Komit. Selesai.

Untuk laman kandungan berat dengan Markdown dalam CMS (Sanity, Contentful), pendekatan yang sama digunakan untuk kandungan: eksport sebagai Markdown atau HTML, terjemah, tulis semula ke CMS melalui API-nya. Keseluruhan saluran boleh dijalankan sebagai langkah binaan atau pada pencetus webhook.

Skrip terjemahan PolyLingo — repositori ini mengandungi 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 — tambah terjemahan ke saluran binaan 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 sesuai dengan aliran kerja i18n Next.js

  • Terjemahkan fail messages/*.json secara langsung — kekunci sentiasa dipelihara
  • Terjemahkan kandungan Markdown untuk pos blog dan halaman dokumen
  • Berfungsi dengan next-intl, next-i18next, dan tetapan tersuai
  • REST API berintegrasi dengan skrip binaan dan webhook CMS
  • Kesemua 36 bahasa dalam satu permintaan
  • Tier percuma — 50,000 token sebulan
  • Repositori ini menggunakan aliran kerja: npm run i18n:polylingo menjana semula setempat pemasaran dari messages/en.json (lihat MARKETING_I18N.md).
  • Berfungsi dengan App Router dan Pages Router
  • Fail output sedia untuk komit — tiada pemformatan semula diperlukan

Sediakan pelbagai bahasa dalam aplikasi Next.js anda

1

Sediakan next-intl dengan fail mesej Bahasa Inggeris anda

Pasang next-intl dan konfigurasikan i18n.ts dan middleware anda. Tulis semua rentetan UI dalam messages/en.json. Struktur fail mengikut keperluan aplikasi anda — rata atau bersarang. Ini menjadi sumber kebenaran tunggal anda.

2

Jalankan skrip terjemahan

Gunakan API JSON PolyLingo dari skrip Node kecil (lihat kod di atas). Dalam monorepo ini, jalankan npm run i18n:polylingo dari frontend/ dengan POLYLINGO_API_KEY diset — ia memecah namespace besar untuk kebolehpercayaan. Larian biasa mengambil masa kurang dari satu minit untuk satu bundel pemasaran penuh.

3

Komit fail setempat dan lancarkan

Fail setempat yang dijana adalah JSON sah dengan struktur yang sama seperti sumber anda. Komit ke repositori anda. Tambah skrip terjemahan ke saluran CI anda untuk memastikan setempat selari dengan setiap perubahan kandungan.

Kes penggunaan pelbagai bahasa Next.js

🚀

Aplikasi SaaS dan papan pemuka

Terjemahkan keseluruhan perpustakaan rentetan UI anda dalam satu larian skrip. Menyokong semua ciri format next-intl — tarikh, nombor, jamak — kerana struktur JSON dipelihara dengan tepat.

📰

Laman kandungan dan blog

Untuk laman Next.js berat kandungan menggunakan Sanity atau Contentful, gunakan PolyLingo untuk menterjemah kandungan halaman serta rentetan UI — API sama, jaminan pemeliharaan format sama.

🛒

E-dagang dengan varian serantau

Terjemahkan nama produk, penerangan, halaman kategori, dan UI checkout. Gunakan model Advanced untuk salinan pemasaran di mana suara jenama penting, Standard untuk rentetan UI fungsional.

Soalan Lazim

Adakah ini berfungsi dengan Next.js App Router?

Ya. Integrasi PolyLingo hanyalah skrip yang membaca dan menulis fail JSON — ia tidak bergantung pada dalaman Next.js. Ia berfungsi dengan App Router, Pages Router, atau mana-mana rangka kerja. Contoh konfigurasi next-intl yang ditunjukkan menggunakan API v4 dengan requestLocale, yang serasi dengan Next.js 13, 14, dan 15.

Apa jika messages.json saya kerap berubah?

Corak yang disyorkan adalah menambah skrip terjemahan ke saluran CI/CD anda, dicetuskan apabila messages/en.json berubah. Ini memastikan semua fail setempat selari secara automatik. Untuk pasukan dengan perubahan salinan kerap, ini mengelakkan perbezaan setempat sepenuhnya.

Adakah PolyLingo berfungsi dengan next-i18next serta next-intl?

Ya. next-i18next menggunakan struktur JSON setempat yang sama. Skrip terjemahan berfungsi sama — arahkan ke direktori public/locales/en/ anda dan tulis output ke direktori setempat lain. Keserasian format JSON adalah sama.

Bagaimana dengan kandungan dinamik yang tidak ada dalam fail mesej?

Kandungan dinamik — pos blog, penerangan produk, kandungan yang dijana pengguna — harus diterjemah di lapisan data, sama ada dalam CMS anda atau melalui skrip binaan yang memproses kandungan sebelum sampai ke Next.js. PolyLingo mengendalikan Markdown, HTML, dan teks biasa dengan baik untuk tujuan ini.

Bolehkah saya terjemah hanya rentetan yang berubah sejak larian terakhir?

Terjemahan inkremental (hanya menterjemah kekunci yang berubah) sedang dalam perancangan. Kini skrip menterjemah semula fail penuh. Untuk kebanyakan fail mesej (di bawah 20KB), ini cukup pantas untuk dijalankan pada setiap komit. Untuk fail sangat besar, memecah mengikut namespace adalah pendekatan yang disyorkan.

Adakah cara untuk menyemak terjemahan sebelum ia ke produksi?

Corak yang disyorkan adalah mengkomit fail setempat terjemahan ke cawangan atau PR berasingan untuk semakan sebelum digabungkan ke main. Ini amalan standard untuk pasukan yang memerlukan semakan manusia pada kualiti terjemahan. PolyLingo menghasilkan laluan pertama yang baik — untuk kebanyakan rentetan UI, output model Standard tidak memerlukan penyuntingan.

Dapatkan fail setempat pertama anda diterjemah dalam masa kurang dari 5 minit.

Kunci API percuma. Tiada kad kredit. Tampal JSON mesej anda dan lihat hasilnya serta-merta.

Dapatkan kunci API anda

Skrip terjemahan mengambil masa 5 minit untuk disediakan. Tier percuma — tiada kad kredit diperlukan.

Tambah pelbagai bahasa ke aplikasi Next.js anda — PolyLingo | PolyLingo