Next.jsはReactベースのフレームワークとして、多くの企業サイトやWebアプリで採用されています。Next.jsサイトを多言語化するにはいくつかのアプローチがあり、プロジェクトの規模や要件によって最適な方法が異なります。

この記事では、Next.jsの多言語化における3つの主要なアプローチを比較し、それぞれのメリット・デメリットを解説します。

Next.jsの多言語化が必要なケース

アプローチ1: next-intl / next-i18next（i18nライブラリ）

Next.js専用のi18nライブラリを使って、アプリケーション内部で多言語対応する方法です。

仕組み

実装イメージ

// messages/ja.json
{
  "hero.title": "Webサイトを瞬時に多言語化",
  "hero.subtitle": "JavaScript1行で導入可能"
}

// messages/en.json
{
  "hero.title": "Instantly multilingualize your website",
  "hero.subtitle": "Deploy with a single line of JavaScript"
}

// コンポーネント内
const t = useTranslations('hero');
return <h1>{t('title')}</h1>;

メリット

デメリット

向いているケース

アプローチ2: App Routerのi18nルーティング

Next.js 13以降のApp Routerを使い、ルーティングレベルで多言語対応する方法です。

仕組み

実装イメージ

app/
  [locale]/
    page.tsx
    about/
      page.tsx
    layout.tsx
  middleware.ts

メリット

デメリット

向いているケース

アプローチ3: JavaScript埋め込み型翻訳（blaid）

Next.jsのコードを変更せず、JavaScriptを1行追加するだけで多言語化する方法です。

仕組み

実装イメージ

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.blaidTranslatorConfig = {
                apiKey: 'your-api-key',
                apiUrl: 'https://blaid.jp',
                targetLanguages: ['en', 'ko', 'zh-CN'],
                defaultLanguage: 'ja'
              };
            `
          }}
        />
      </head>
      <body>
        {children}
        <script src="https://blaid.jp/js/blaid-translator.js" />
      </body>
    </html>
  );
}

メリット

デメリット

向いているケース

3つのアプローチ比較表

比較項目 next-intl App Router i18n blaid
導入の手軽さ 難しい 難しい 非常に簡単
既存サイトへの導入 大改修が必要 大改修が必要 コード追加のみ
SEO対応 最強（SSR/SSG） 最強（SSR/SSG） エクスポート機能
翻訳方式 手動（JSONファイル） 手動 AI自動 + 手動修正
翻訳管理 コードベース内 コードベース内 クラウドCMS
開発コスト 高 高 低
型安全性 TypeScript対応 TypeScript対応 -
初回表示 翻訳済みHTML 翻訳済みHTML 日本語→翻訳切替
用語集 手動管理 手動管理 機能あり

選び方のガイド

Q: 新規開発で、開発リソースが十分にある？ → next-intl または App Router i18n がベスト

Q: 既存のNext.jsサイトを素早く多言語化したい？ → blaid がベスト。コード改修不要で即日導入可能

Q: まず効果を検証してから判断したい？ → blaid の無料プランで試し、効果が確認できたらi18nライブラリへの移行も検討

Q: SaaSプロダクトで本格的な国際展開？ → next-intl がベスト。長期的にはi18nライブラリの方がメンテナブル

まとめ

Next.jsの多言語化は、プロジェクトの状況によって最適解が異なります。

blaidなら無料プランでNext.jsサイトの多言語化をすぐに試せます。まずは効果を確認してから、本格的なi18n対応を判断するのが最も合理的なアプローチです。