Next.js + PolyLingo

Next.jsアプリに多言語対応を追加。

ロケールファイル、Markdownコンテンツ、HTMLページを単一のAPIコールで翻訳。App Router、next-intl、あらゆるi18nルーティング設定に対応。

App Router
Next.js 13–15対応
next-intl
ネイティブ統合
10言語
1スクリプト実行
約3秒
典型的な翻訳スクリプト実行時間

Next.jsはルーティングを提供しますが、翻訳は提供しません。

Next.jsのApp Routerはロケールベースのルーティングを優れた形でサポートしています。next-intlのようなライブラリは翻訳ファイルの管理やロケール切り替えを簡単にします。しかし翻訳自体は解決しません。翻訳コンテンツを各言語で用意する必要があり、その多くはあなた自身が行うことになります。多くのチームでは英語のJSONをDeepLにコピーし、壊れたフォーマットを修正し、結果を貼り付け、言語ごとに繰り返すというワークフローです。遅く、エラーが起きやすく、スケールしません。

最も一般的なワークフローは、すべてのUI文字列を英語でソースコード内に書き、各ターゲット言語用にmessages.jsonファイルを翻訳することです。理論上は簡単ですが、実際には10以上のロケールファイルをソースの変更に合わせて同期させるのが繰り返しの悩みになります。英語のコピーが変わるたびにすべてのロケールファイルを更新する必要があります。標準的な翻訳APIを使うと、キー名が壊れたり、変数プレースホルダーが翻訳されたり、JSON構造がロケール間でずれたりして、追跡が難しい微妙なランタイムバグが発生します。

PolyLingoは既存のNext.js i18nセットアップにフィットします。

next-intlやその他のi18nライブラリを使っている場合、メッセージはすでにJSON形式です。PolyLingoはそのJSONを翻訳モデルに送り、キーはそのまま、ネストも維持し、文字列値だけを正しく翻訳した各ターゲット言語のコピーを返します。ビルドスクリプト、Webhook、PolyLingo UIから呼び出せます。結果は直接messagesディレクトリに配置されます。

ワークフローはこうです:英語のmessages.jsonを書きます。PolyLingo APIを呼び出す単一のスクリプトを実行し、ソースファイルとすべてのターゲット言語コードを渡します。言語ごとに同一構造の翻訳済みJSONファイルを受け取り、それぞれmessages/ディレクトリに書き込みます。コミットして完了。

CMS(Sanity、Contentful)でMarkdownを多用するコンテンツ重視のサイトでは、同じアプローチをコンテンツにも適用します。MarkdownやHTMLとしてエクスポートし、翻訳し、CMSのAPI経由で書き戻します。パイプライン全体はビルドステップやWebhookトリガーで実行可能です。

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 — ビルドパイプラインにtranslateを追加
// 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はNext.js i18nワークフローに合うのか

  • messages/*.jsonファイルを直接翻訳 — キーは常に保持
  • ブログ投稿やドキュメントページのMarkdownコンテンツを翻訳
  • next-intl、next-i18next、カスタムセットアップに対応
  • REST APIはビルドスクリプトやCMSのWebhookと統合可能
  • 36言語すべてを単一リクエストで対応
  • 無料プラン — 月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とミドルウェアを設定します。すべてのUI文字列をmessages/en.jsonに書きます。ファイル構造はアプリの必要に応じてフラットでもネストでも構いません。これが単一の真実のソースになります。

2

翻訳スクリプトを実行

小さなNodeスクリプトからPolyLingo JSON APIを使います(上記コード参照)。このモノレポでは、frontend/からnpm run i18n:polylingoをPOLYLINGO_API_KEYを設定して実行します。大きな名前空間は信頼性のために分割されます。典型的な実行はマーケティングバンドル全体で1分未満です。

3

ロケールファイルをコミットしてデプロイ

生成されたロケールファイルはソースと同一構造の有効なJSONです。リポジトリにコミットします。翻訳スクリプトをCIパイプラインに追加し、コンテンツ変更ごとにロケールを同期させます。

Next.js多言語対応のユースケース

🚀

SaaSアプリとダッシュボード

UI文字列ライブラリ全体を1回のスクリプト実行で翻訳。next-intlのすべてのフォーマット機能(日付、数値、複数形)をサポート。JSON構造は完全に保持されます。

📰

コンテンツサイトとブログ

SanityやContentfulを使うコンテンツ重視のNext.jsサイトでは、UI文字列だけでなくページコンテンツもPolyLingoで翻訳可能。同じAPI、同じフォーマット保持保証。

🛒

地域別バリエーションを持つEコマース

商品名、説明、カテゴリページ、チェックアウトUIを翻訳。ブランドボイスが重要なマーケティングコピーにはAdvancedモデル、機能的UI文字列にはStandardモデルを使用。

よくある質問

Next.jsのApp Routerでも動作しますか?

はい。PolyLingoの統合はJSONファイルの読み書きを行うスクリプトであり、Next.jsの内部には依存しません。App Router、Pages Router、どのフレームワークでも動作します。示したnext-intlの設定例はv4 APIのrequestLocaleを使っており、Next.js 13、14、15に対応しています。

messages.jsonが頻繁に変わる場合は?

推奨パターンは、messages/en.jsonの変更をトリガーにCI/CDパイプラインで翻訳スクリプトを実行することです。これによりすべてのロケールファイルが自動的に同期されます。コピー変更が頻繁なチームでは、ロケールのずれを完全に防げます。

PolyLingoはnext-i18nextとnext-intlの両方に対応していますか?

はい。next-i18nextは同じロケールJSON構造を使います。翻訳スクリプトは同様に動作し、public/locales/en/ディレクトリを指定し、他のロケールディレクトリに出力します。JSONフォーマットの互換性は同じです。

messagesファイルにない動的コンテンツはどうしますか?

動的コンテンツ(ブログ投稿、商品説明、ユーザー生成コンテンツ)はデータ層で翻訳すべきです。CMS内か、Next.jsに届く前に処理するビルドスクリプトで行います。PolyLingoはMarkdown、HTML、プレーンテキストを同様に扱えます。

前回の実行以降に変わった文字列だけ翻訳できますか?

変更されたキーだけを翻訳するインクリメンタル翻訳は今後の予定です。現状はスクリプトがファイル全体を再翻訳します。ほとんどのメッセージファイル(20KB未満)では十分高速で、すべてのコミットで実行可能です。非常に大きなファイルは名前空間ごとに分割するのが推奨されます。

翻訳を本番に反映する前にレビューできますか?

推奨パターンは翻訳済みロケールファイルを別ブランチやPRにコミットし、マージ前にレビューすることです。翻訳品質の人間による確認が必要なチームの標準的な運用です。PolyLingoは良質な初回翻訳を生成し、ほとんどのUI文字列はStandardモデルの出力で編集不要です。

最初のロケールファイルを5分以内に翻訳しましょう。

無料APIキー。クレジットカード不要。メッセージJSONを貼り付けてすぐに結果を確認。

APIキーを取得

翻訳スクリプトのセットアップは5分で完了。無料プラン、クレジットカード不要。

Next.jsアプリに多言語対応を追加 — PolyLingo | PolyLingo