著者:
    Aymeric PINEAU
    作成:2026-01-10最終更新:2026-09-06

    既存のNext.jsアプリケーションを後から多言語化（i18n）する方法（2026年版ガイド）

    Next.jsプロジェクトの初期段階から国際化（i18n）を導入するのは比較的簡単です。しかし、すでに単一言語で構築され運用されているNext.jsアプリケーションを後から多言語化する必要が生じた場合、どうすればよいでしょうか？

    next-intlやnext-i18nextなどの従来のライブラリでこれを試みたことがある方なら、その大変さを知っているはずです：

    • 何百ものJSX/TSXファイルからハードコードされたテキストを手作業で探す。
    • ネストされたJSONファイルを手作業で作成し、任意の翻訳キー（pages.dashboard.header.titleなど）を命名する。
    • JSXのテキストを翻訳フック（t('...')）に置き換える。
    • app/フォルダ全体をapp/[locale]/...に再構築し、既存のルートやブックマーク、検索エンジンのインデックスを破損させる。

    2026年、コードベース全体を書き直す必要はありません。Intlayerを使えば、自動抽出、AI翻訳、非侵入的なルーティングを活用して、既存のNext.jsアプリをわずか数分で多言語化できます。

    Next.js 16 App Routerの詳細なステップバイステップ技術ガイドをお探しですか？専用ドキュメントをご覧ください: IntlayerでNext.js 16を翻訳する。

    目次

    後付け導入の課題：既存アプリの多言語化が困難な理由

    既存のNext.jsアプリを国際化する際、開発者は3つの大きな壁に直面します：

    1. コードの破壊：JSON辞書へ文字列を手動抽出すると、ほぼすべてのコンポーネントに変更が入り、リグレッションのリスクが高まります。
    2. ルーティングの制約：従来のライブラリは、ルートレイアウトやページを[locale]動的セグメントへ移動させることを強制します。
    3. 膨大な翻訳作業：抽出した文字列を多数の言語に翻訳するために、終わりのないコピー＆ペースト作業が発生します。

    Intlayerは、コンパイラ支援による抽出、宣言型辞書、柔軟なルーティングによってこれらの問題を根本から解決します。

    自動コンテンツ抽出（手作業によるテキスト検索は不要）

    オプションA：CLI抽出ツール (npx intlayer extract)

    プロジェクトのコードベースで直接Intlayerの抽出コマンドを実行します：

    bash
    npx intlayer extract

    このコマンドはReactコンポーネントを解析し、表示テキストを抽出してコンポーネントと同じディレクトリに宣言ファイル（.content.ts)を自動生成します。

    オプションB：Intlayerコンパイラ（ビルド時自動抽出）

    Intlayerコンパイラを有効にすると、デフォルト言語のテキストを通常通り直接JSX内に記述し続けることができます。ビルド時にコンパイラが自動的にテキストを抽出し、ローカライズされたコンテンツを注入します：

    src/app/page.tsx
    // Write normal React code. The compiler extracts the text automatically
export default function HomePage() {
  return (
    <section>
      <h1>Welcome to our platform</h1>
      <p>Start exploring our modern features today.</p>
    </section>
  );
}

    バックグラウンドでIntlayerが辞書を構築し、コンポーネントをローカライズされたコンテンツに紐付けるため、手作業のリファクタリングは一切不要です。

    この場合、以下の内容で src/app/page.content.ts ファイルが生成されます：

    src/app/page.content.ts
    import { Dictionary } from "intlayer";

const content = {
  key: "home-page",
  content: {
    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
    }),
  },
};

export default content;

    好みのLLMを活用したAI自動翻訳

    コンテンツを抽出したら、Intlayerに組み込まれたAI翻訳CLIを使って、OpenAI、Anthropic、DeepSeek、Mistral等と連携し、数秒で翻訳できます：

    bash
    npx intlayer fill
    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
    defaultLocale: Locales.ENGLISH,
  },
  ai: {
    provider: "openai",
    model: "gpt-4o-mini",
    apiKey: process.env.OPENAI_API_KEY,
    applicationContext: "生産性とチーム協業のためのSaaSダッシュボード",
  },
};

export default config;

    npx intlayer fill を実行すると、設定したすべての言語の翻訳が .content.ts 宣言ファイルに自動補完されます：

    src/app/page.content.ts
    import { Dictionary } from "intlayer";

const content = {
  key: "home-page",
  content: {
    welcomeToOurPlatform: t({
      en: "Welcome to our platform",
      fr: "Bienvenue sur notre plateforme",
      es: "Bienvenido a nuestra plataforma",
      ja: "プラットフォームへようこそ",
    }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
      es: "Comience a explorar nuestras funciones modernas hoy.",
      ja: "モダンな機能を今すぐ体験しましょう。",
    }),
  },
};

export default content;

    Intlayerは上位レベルの applicationContext をLLMに提供するため、従来の自動翻訳ツールよりも技術的なニュアンス、ブランドのトーン、文脈に沿った文法を正確に保持できます。

    本番環境にデプロイする前に、翻訳漏れの文字列がないか確認するには：

    bash
    npx intlayer test

    既存のURLを壊さずに多言語ルーティングを追加

    Intlayerは柔軟なルーティング戦略を提供します：

    • クエリパラメータ / Cookieモード (search-params): [locale]フォルダに移動せず、既存のフォルダ構造（/app/page.tsx）をそのまま維持できます。
    • プレフィックスモード (prefix / prefix-all-locales): SEOに適したURL構造（/ja/dashboardなど）に移行する際も、Next.jsプロキシを通じて柔軟に対応します。

    わずか数秒でNext.jsの統合を設定できます：

    next.config.ts
    import type { NextConfig } from "next";
import { withIntlayer } from "next-intlayer/server";

const nextConfig: NextConfig = {/* Your existing Next.js config */};

export default withIntlayer(nextConfig);

    ルートレイアウトを IntlayerProvider でラップします：

    src/app/layout.tsx
    import type { ReactNode } from "react";
import { IntlayerProvider } from "next-intlayer";
import { getLocale } from "next-intlayer/server";
import { getHTMLTextDir } from "intlayer";

export default async function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  const locale = await getLocale();

  return (
    <html lang={locale} dir={getHTMLTextDir(locale)}>
      <body>
        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
      </body>
    </html>
  );
}

    多言語SEO

    多言語メタデータやhreflangヘッダーを自動生成し、検索エンジンでの発見性を高めます：

    src/app/page.tsx
    import type { Metadata } from "next";
import { getLocale } from "next-intlayer/server";
import { getIntlayer } from "intlayer";

export const generateMetadata = async (): Promise<Metadata> => {
  const locale = await getLocale();
  const content = getIntlayer("home-page-metadata", locale);

  return {
    title: content.title,
    description: content.description,
  };
};

    詳細ガイド：ステップバイステップの実装手順へ

    本記事では既存アプリへの導入概要を解説しました。ミドルウェアの詳細、静的生成（generateStaticParams）、サーバーコンポーネント等の全設定手順については、完全版ドキュメントをご覧ください：

    👉 IntlayerでNext.js 16を翻訳する完全ガイド

    よくある質問 (FAQ)

    はい。Intlayerはrouting.mode: "search-params"やCookie/Header検出に対応しており、既存のフォルダ構造とURLを完全に保てます。

    いいえ。npx intlayer extractまたはIntlayerコンパイラにより、自動的に抽出・管理されます。

    コンポーネント単位の辞書定義とビルド時マクロにより、画面に必要な翻訳データのみがクライアントに送られます。

    はい。npx intlayer fillコマンドを実行することで、主要なLLMと連携して文脈に合った翻訳を自動生成できます。

    RAG を活用したドキュメントアシスタント既存のVite & Reactアプリを多言語化

    コメント

    まだコメントはありません。最初のコメントを共有しましょう。

    関連記事

    ユーザーに見つかる前に翻訳漏れを検出する方法

    翻訳漏れは静かに発生します。フォールバックがエラーを隠してしまう理由、実際に機能する4つの検出レイヤー、そして未翻訳キーでビルドを失敗させる方法を解説します。

    Aymeric PINEAU

    Intlayerを使ってi18nextのJSON翻訳を自動化する方法

    Intlayerとi18nextを使ってJavaScriptアプリケーションの国際化を強化するためにJSON翻訳を自動化する方法。

    Aymeric PINEAU

    react-i18next vs react-intl vs Intlayer

    Reactアプリの国際化（i18n）のためにreact-i18nextをnext-intlおよびIntlayerと統合する方法

    Aymeric PINEAU

    L10n プラットフォームの代替

    ニーズに合った最適な L10n プラットフォームの代替を見つける

    Aymeric PINEAU

    最新の投稿

    2026年においてnext-intlは時代遅れなのか？

    next-intlはNext.js App Routerの定番となりました。しかし、ランタイムによるバンドルの肥大化や手動での名前空間管理という課題は残されています。

    Aymeric PINEAU

    2026年においてi18nextは時代遅れなのか？

    i18nextは数百万のWebサイトで利用されていますが、2011年設計のランタイムアーキテクチャには限界も見え始めています。バンドルサイズ、Tree-shakingの制約、進化の停滞を分析します。

    Aymeric PINEAU

    2026年においてvue-i18nは時代遅れなのか？

    vue-i18nは10年以上にわたりVueとNuxtの標準として親しまれてきました。しかしベンチマークではWebで最も重いi18nランタイムという結果に。その理由を紐解きます。

    Aymeric PINEAU

    Next.js i18n - what the App Router makes you build

    The App Router dropped built-in i18n routing. What you now write yourself, why Server and Client Components split the problem, and how libraries compare.

    Aymeric PINEAU