Next.js + PolyLingo

Додайте багатомовність до вашого додатку Next.js.

Перекладайте ваші локалізовані файли, вміст Markdown та HTML-сторінки через один виклик API. Працює з App Router, next-intl та будь-якою i18n-налаштуванням маршрутизації.

App Router
Підтримка Next.js 13–15
next-intl
рідна інтеграція
10 мов
один запуск скрипту
~3с
типовий час виконання скрипту перекладу

Next.js надає маршрутизацію. Він не надає переклади.

Next.js App Router має відмінну вбудовану підтримку маршрутизації на основі локалі. Бібліотеки, як-от next-intl, спрощують керування файлами перекладів та перемикання локалі. Але вони не вирішують сам переклад — хтось має створити перекладений контент кожною мовою, і зазвичай це ви. Для більшості команд робочий процес — копіювати англійський JSON у DeepL, виправляти зламане форматування, вставляти результат назад, повторювати для кожної мови. Це повільно, схильне до помилок і не масштабується.

Найпоширеніший робочий процес — писати всі UI-рядки англійською у вихідному коді, а потім перекладати файл messages.json для кожної цільової мови. Теоретично це просто. Практично ж підтримувати синхронність понад 10 локалізованих файлів із змінами у вихідному коді стає постійною проблемою. Кожного разу, коли змінюється англійський текст, потрібно оновлювати всі локалізовані файли. При використанні стандартних API перекладу імена ключів пошкоджуються, змінні плейсхолдери перекладаються, а структура JSON розходиться між локалями — що викликає тонкі помилки під час виконання, які важко відстежити.

PolyLingo інтегрується у вашу існуючу i18n-налаштування Next.js.

Якщо ви використовуєте next-intl або будь-яку іншу i18n-бібліотеку, ваші повідомлення вже у форматі JSON. PolyLingo приймає цей JSON, надсилає його через модель перекладу і повертає перекладені копії для кожної цільової мови — з незмінними ключами, збереженою вкладеністю та правильно перекладеними рядковими значеннями. Ви можете викликати це зі скрипту збірки, вебхука або інтерфейсу PolyLingo. Результат одразу потрапляє у вашу директорію повідомлень.

Робочий процес: напишіть ваш англійський messages.json. Запустіть один скрипт, який викликає PolyLingo API з вашим вихідним файлом і всіма кодами цільових мов. Отримайте один перекладений JSON-файл на мову з ідентичною структурою. Запишіть кожен у вашу директорію messages/. Зробіть коміт. Готово.

Для сайтів з великим обсягом контенту, що використовують Markdown у CMS (Sanity, Contentful), той самий підхід застосовується до контенту: експортуйте у Markdown або HTML, перекладайте, записуйте назад у CMS через її API. Весь процес може запускатися як крок збірки або за тригером вебхука.

Скрипт перекладу PolyLingo — цей репозиторій містить 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 — конфігурація 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 — додайте переклад у ваш pipeline збірки
// package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "i18n:polylingo": "node scripts/translate-messages.mjs",
    "translate:build": "npm run i18n:polylingo && next build"
  }
}

Чому PolyLingo підходить для робочого процесу i18n Next.js

  • Перекладайте файли messages/*.json напряму — ключі завжди збережені
  • Перекладайте вміст Markdown для блогів та документації
  • Працює з next-intl, next-i18next та кастомними налаштуваннями
  • REST API інтегрується зі скриптами збірки та вебхуками CMS
  • Всі 43 мови в одному запиті
  • Безкоштовний тариф — 50 000 токенів на місяць
  • Цей репозиторій використовує робочий процес: npm run i18n:polylingo генерує маркетингові локалі з messages/en.json (див. MARKETING_I18N.md).
  • Працює з App Router та Pages Router
  • Вихідні файли готові до коміту — не потребують переформатування

Налаштуйте багатомовність у вашому додатку Next.js

1

Налаштуйте next-intl з вашим англійським файлом повідомлень

Встановіть next-intl і налаштуйте ваш i18n.ts та middleware. Напишіть усі UI-рядки у messages/en.json. Структуруйте файл так, як потрібно вашому додатку — плоско або вкладено. Це стане вашим єдиним джерелом правди.

2

Запустіть скрипт перекладу

Використовуйте PolyLingo JSON API з невеликого Node-скрипту (див. код вище). У цьому монорепозиторії запустіть npm run i18n:polylingo з POLYLINGO_API_KEY — він розбиває великі простори імен для надійності. Типовий запуск займає значно менше хвилини для повного маркетингового пакету.

3

Закомітьте локалізовані файли та розгорніть

Згенеровані локалізовані файли є валідним JSON з ідентичною структурою до вашого вихідного файлу. Закомітьте їх у ваш репозиторій. Додайте скрипт перекладу у ваш CI pipeline, щоб підтримувати локалі в синхронізації з кожною зміною контенту.

Випадки використання багатомовності Next.js

🚀

SaaS-додатки та панелі керування

Перекладіть всю бібліотеку UI-рядків одним запуском скрипту. Підтримує всі функції форматування next-intl — дати, числа, множину — оскільки структура JSON зберігається точно.

📰

Контентні сайти та блоги

Для контентних сайтів Next.js, що використовують Sanity або Contentful, використовуйте PolyLingo для перекладу вмісту сторінок та UI-рядків — той самий API, ті ж гарантії збереження формату.

🛒

E-commerce з регіональними варіантами

Перекладайте назви продуктів, описи, сторінки категорій та UI оформлення замовлення. Використовуйте Advanced модель для маркетингових текстів, де важливий голос бренду, Standard — для функціональних UI-рядків.

Поширені запитання

Чи працює це з Next.js App Router?

Так. Інтеграція PolyLingo — це просто скрипт, який читає і записує JSON-файли — він не залежить від внутрішніх механізмів Next.js. Працює з App Router, Pages Router або будь-яким фреймворком. Приклад конфігурації next-intl використовує API v4 з requestLocale, сумісний з Next.js 13, 14 та 15.

Що робити, якщо мій messages.json часто змінюється?

Рекомендований підхід — додати скрипт перекладу у ваш CI/CD pipeline, який запускається при змінах messages/en.json. Це автоматично підтримує синхронність усіх локалізованих файлів. Для команд з частими змінами тексту це повністю запобігає розбіжностям локалей.

Чи працює PolyLingo з next-i18next так само, як і з next-intl?

Так. next-i18next використовує ту ж структуру локалізованого JSON. Скрипт перекладу працює однаково — вкажіть директорію public/locales/en/ і запишіть результати в інші локалізовані директорії. Формат JSON сумісний.

Що з динамічним контентом, якого немає у файлі повідомлень?

Динамічний контент — пости в блогах, описи продуктів, контент, створений користувачами — слід перекладати на рівні даних, або у вашій CMS, або через скрипт збірки, який обробляє контент перед тим, як він потрапить у Next.js. PolyLingo однаково добре обробляє Markdown, HTML та простий текст для цієї мети.

Чи можна перекладати лише рядки, які змінилися з останнього запуску?

Інкрементальний переклад (переклад лише змінених ключів) у планах. Наразі скрипт перекладає весь файл повністю. Для більшості файлів повідомлень (до 20 КБ) це досить швидко для запуску при кожному коміті. Для дуже великих файлів рекомендується розбивати за просторами імен.

Чи є спосіб переглянути переклади перед їхнім виходом у продакшн?

Рекомендований підхід — комітити перекладені локалізовані файли у окрему гілку або PR для перегляду перед злиттям у main. Це стандартна практика для команд, які потребують людського контролю якості перекладу. PolyLingo генерує якісний початковий варіант — для більшості UI-рядків вихід Standard моделі не потребує редагування.

Отримайте перший перекладений локалізований файл менш ніж за 5 хвилин.

Безкоштовний API-ключ. Без кредитної картки. Вставте ваш JSON повідомлень і одразу побачте результат.

Отримати API-ключ

Налаштування скрипту перекладу займає 5 хвилин. Безкоштовний тариф — без кредитної картки.

Додайте багатомовність до вашого додатку Next.js — PolyLingo | PolyLingo