【ITニュース解説】Optimizing Next.js Internationalization with URL-Based Locales

ウェブサイトやウェブアプリケーションを複数の言語で提供する多言語対応は、世界中のユーザーにサービスを届ける上で非常に重要な機能だ。しかし、この多言語対応の実装方法によっては、ウェブサイトの性能や検索エンジンからの見つけやすさ（SEO）に大きな差が生まれる。今回のニュース記事は、人気のあるウェブフレームワーク「Next.js」で多言語対応を最適化する方法について解説している。

かつて、多くのウェブサイトでは、ユーザーの言語設定を「クッキー（Cookie）」という仕組みに保存していた。ユーザーがサイトにアクセスした際、クッキーに保存された情報をもとに、表示する言語を決めていたのだ。この方法では、Next.jsのようなフレームワークを使う場合、「動的レンダリング」が強制されるという課題があった。動的レンダリングとは、ユーザーがアクセスするたびにサーバーがページの内容を生成し直す方法だ。これは、ユーザーごとに異なる内容を提供できる一方で、ページが表示されるまでに時間がかかり、サーバーに負担がかかるという欠点がある。また、検索エンジンがクッキーの情報を読み取ることが難しいため、言語ごとのページを適切にインデックスできず、SEOの面でも不利だった。

この問題を解決するために、記事では「URLベースのロケール（Locale）」というアプローチへの移行を提案している。これは、ウェブサイトのURLに直接言語情報を含める方法だ。例えば、英語ページなら/en/about、日本語ページなら/ja/aboutのように、URLのパスに/en/や/ja/といった言語コード（ロケール）を含めるのだ。

このURLベースのロケールに移行することで、Next.jsの強力な機能である「静的サイト生成（Static Site Generation、略してSSG）」を再び活用できるようになる。静的サイト生成とは、ウェブサイトをビルドする際に、あらかじめすべてのページをHTMLファイルとして生成しておく方法だ。これにより、ユーザーがページにアクセスした際には、すでに用意されているHTMLファイルをすぐに配信できるため、ページの読み込みが圧倒的に速くなる。ウェブサイトの表示速度はユーザー体験に直結し、SEOの評価基準の一つでもあるため、これは大きなメリットだ。

URLに言語情報が含まれることで、各言語のページがそれぞれ独立したURLを持つことになる。これにより、検索エンジンは/en/aboutと/ja/aboutをそれぞれ別のページとして認識し、適切にインデックスできるようになる。結果として、検索結果での表示機会が増え、多言語SEOの効果が大きく向上するのだ。また、特定の言語のページURLを共有したりブックマークしたりする際も、言語情報がURLに含まれているため、常に正しい言語のページにアクセスできるようになる。

このようなURLベースの多言語対応を実現するために、記事では「next-intl」というライブラリとNext.jsの「App Router」を組み合わせた具体的な実装方法を紹介している。

まず、対応する言語を定義する設定ファイル（config.ts）を作成する。ここでは、'en'（英語）と'ja'（日本語）を対応言語とし、デフォルト言語を'en'に設定している。これにより、今後言語を追加したり削除したりする際に、一箇所を変更するだけで済むようになる。

次に、ルーティング戦略を設定するファイル（routing.ts）を作成する。next-intl/routingからdefineRoutingをインポートし、先ほど定義した言語とデフォルト言語を渡す。ここで重要なのはlocalePrefix: 'never'という設定だ。これは、next-intlが自動的にURLに言語プレフィックスを追加しないように指示するもので、URLに言語コードを含める処理はNext.js自身が担当することになる。これにより、/en/aboutのような形式のURLをNext.jsが適切に扱えるようになるのだ。

ウェブサイト内のナビゲーション（ページの移動）をスムーズにするために、ナビゲーションヘルパーを定義するファイル（navigation.ts）を作成する。next-intl/navigationからcreateNavigationをインポートし、先ほど設定したルーティング情報を渡すことで、LinkコンポーネントやuseRouterフックといったナビゲーション関連の機能が、自動的にURLに言語情報を組み込んでくれるようになる。開発者は、言語を意識せずに通常のリンクを記述するだけで、正しい言語のページに遷移できる。

サーバー側でリクエストされた言語を解決し、対応する翻訳ファイルを読み込むための処理を記述するファイル（request.ts）も必要だ。next-intl/serverのgetRequestConfigを使い、リクエストされた言語を特定する。もし無効な言語がリクエストされた場合は、hasLocaleヘルパー関数を使ってチェックし、あらかじめ設定したデフォルト言語にフォールバックする。そして、その言語に対応する翻訳ファイル（例えば、/i18n/locales/en/common.json）を読み込み、サーバーがその言語でコンテンツを準備できるようにする。

ウェブサイト全体の骨格となる「ルートレイアウト」ファイル（layout.ts）では、Next.jsが各言語のページを事前に生成できるようにするための設定を行う。generateStaticParams関数を使って、定義されたすべての言語（enとja）について静的ページを生成するようNext.jsに伝える。また、リクエストされたURLの言語情報を取得し、setRequestLocale(locale)を使ってnext-intlに現在の言語を設定する。ここでもhasLocaleを使って、URLに無効な言語が含まれていないかを確認し、もし不正な言語であればnotFound()を呼び出して、用意された404ページを表示させることで、エラーページの一貫性を保つ。

ユーザーが能動的に言語を切り替えられるように、クライアント側で動作する言語切り替えコンポーネント（locale-switcher.tsx）も作成する。これは、ドロップダウンメニューなどで言語を選択するUIを提供し、選択された言語に応じてURLを更新する。useRouterとusePathnameを使って現在のURLパスを取得し、ユーザーが新しい言語を選択するとrouter.pushを呼び出す。これにより、例えば/en/aboutから/ja/aboutへ、URLが自動的に更新され、ページ全体が新しい言語で再表示される。

最後に、ウェブサイトに存在しないURLや、サポートされていない言語がURLに含まれた場合に適切に対応するための「キャッチオールルート」を設定する。これは、app/[...rest]/page.tsxという特別なファイルを作成することで実現する。このファイルは、他のどのルートにもマッチしないすべてのリクエストを受け止める役割を果たす。このページでは、単純にnotFound()関数を呼び出すことで、アプリケーション全体のルートディレクトリに用意されたnot-found.tsxコンポーネント（カスタム404ページ）を表示させる。これにより、ユーザーが誤ったURLにアクセスした場合でも、一貫性のあるエラーページが表示され、ユーザー体験が損なわれるのを防ぐ。

このように、クッキーベースの多言語対応からURLベースのルーティングに移行することで、Next.jsの静的サイト生成のメリットを最大限に引き出すことができ、ページの読み込み速度の向上とSEOの強化を実現できる。さらに、next-intlライブラリを組み合わせることで、多言語対応の仕組みがモジュール化され、新しい言語の追加や管理が容易になる。この最適化されたアプローチは、アプリケーション全体のパフォーマンスと保守性を高め、より良いユーザー体験を提供する上で非常に有効な手段である。