Docusaurusのナビゲーションバーとフッターを国際化（i18n）する手順

2025年6月21日 · 約4分

hiroaki

Individual Developer

Docusaurusサイトの主要UI、ナビゲーションバーとフッターを国際化（i18n）編集した際の備忘録として整理します。

1. 目的

Docusaurusのi18n機能は、サイトのテキストを多言語に対応させるための仕組み。今回は、ナビゲーションバーとフッター に新しい項目を追加し、それを日本語（デフォルト）から英語へ翻訳するまでの流れを解説します。

原文の一元管理翻訳の元となるテキストは、すべて docusaurus.config.ts ファイル内で管理。これにより、サイトの構造と文言を一箇所で把握。
翻訳ファイルの自動生成 DocusaurusのCLIコマンドを利用し、翻訳が必要なテキストを自動で抽出。言語ごとの翻訳ファイル（JSON形式）を生成。
シンプルな翻訳作業生成されたJSONファイルの特定フィールド（message）の編集のみで、翻訳が完了。

2. 国際化対応のワークフロー

例として、ナビゲーションバーとフッターに「ポートフォリオ」という新しいリンクを追加し、英語に翻訳する手順を解説。

Step 1: 原文（日本語）の編集

サイトのマスター設定ファイルである docusaurus.config.ts に、新しい項目を追加。

docusaurus.config.ts を開く。

ナビゲーションバーに項目を追加。themeConfig.navbar.items 配列に、新しいリンクオブジェクトを記述。

// ...
navbar: {
  // ...
  items: [
    // ...既存の項目...
    { to: '/blog', label: 'ブログ', position: 'left' },
    { to: '/portfolio', label: 'ポートフォリオ', position: 'left' }, // ← この行を追加
    { to: '/diary', label: '日記', position: 'left' },
    // ...
  ],
},
// ...

フッターに項目を追加。themeConfig.footer.links 配列にも同様にリンクを記述。

// ...
footer: {
  // ...
  links: [
    {
      title: 'コンテンツ',
      items: [
        // ...既存の項目...
        {
          label: 'ポートフォリオ', // ← このオブジェクトを追加
          to: '/portfolio',
        },
        // ...
      ],
    },
    // ...
  ],
},
// ...

Step 2: 翻訳ファイルの更新

docusaurus.config.ts の変更内容を、翻訳ファイルに反映。

CLIコマンドの実行。ターミナルで以下のコマンドを実行し、追加したテキストを翻訳対象として抽出。
```
docker-compose run --rm app pnpm write-translations --locale en
```
翻訳ファイルの更新。コマンドの成功により、i18n/en/docusaurus-theme-classic/ 配下の navbar.json と footer.json に、新しい翻訳キーが自動で追加される。

Step 3: 英語への翻訳

新しく追加されたキーに対して、英語の翻訳を記述。

ナビゲーションバーの翻訳。navbar.json を開き、item.label.ポートフォリオ の message を英語に書き換え。

フッターの翻訳。footer.json を開き、link.item.label.ポートフォリオ の message を編集。

Step 4: 翻訳結果の確認

編集した翻訳がサイトに正しく表示されるか、本番ビルドを作成して確認。

サイトのビルド。以下のコマンドで、全言語の静的ファイルを生成。
```
docker-compose run --rm app pnpm build
```

プレビューサーバーの起動。生成された build ディレクトリをサーブする。

docker-compose run --rm --service-ports app pnpm exec http-server build --single --port 3000 --host 0.0.0.0

ブラウザでの確認。
- http://localhost:3000/en/ にアクセス。
- ナビゲーションバーとフッターに「Portfolio」リンクが表示されていることを確認。
- サイト右上の言語スイッチャーで言語を切り替え、両方の表示が意図通りかチェック。

1. 目的​

2. 国際化対応のワークフロー​

Step 1: 原文（日本語）の編集​

Step 2: 翻訳ファイルの更新​

Step 3: 英語への翻訳​

Step 4: 翻訳結果の確認​