Next.jsで手軽に多言語対応を行う方法を解説

はじめに

Next.jsはReactベースのフレームワークでありながら、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）など幅広い機能を提供しています。 その中でも、 i18n (国際化対応) によってアプリケーションを多言語向けに最適化できる点が注目されることが多いのではないでしょうか。 実際にサイトを訪れるユーザーが英語や日本語、その他の言語を自在に切り替えられる仕組みがあると、多くの国や地域の人々に配慮したサービスを展開できます。

ですが、初めてプログラミングを学ぶ皆さんにとっては、i18nと聞いても「何をどうすればいいのか」が見えにくいかもしれません。 本記事では、Next.jsのi18n機能を活用する方法をシンプルに紹介します。 また、どのような場面で利用すると便利なのか、実務での活用例もまじえてお話しします。

この記事を読むとわかること

• Next.jsが備えるi18n対応の概要
• 具体的なセットアップ方法と翻訳ファイルの使い方
• サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）との組み合わせのポイント
• 業務での活用シーンにおけるメリット

Next.jsにおけるi18nの概要

Next.jsでは、フレームワークレベルで複数の言語を扱う仕組みを備えています。 たとえば、next.config.jsに多言語設定を追記し、リダイレクトやパスベースでの言語切り替えを管理できるようにするといった流れが一般的です。

単純に言語の表示を切り替えるだけなら、単に翻訳ファイルを読み込んでテキストを切り替えるだけに思われるかもしれません。 ただし、実際にはURLのパス構造やサーバー側の処理との組み合わせが重要になります。 ブラウザの言語設定によって自動的にリダイレクトする方法など、運用に合わせた柔軟な制御も可能です。

こうした多言語対応は、海外からのアクセスがあるWebサービスだけでなく、国内ユーザー向けでも特定エリアの方言や特別な業界用語を変換表示するなど、アイデア次第で活用範囲が広がります。

i18nを導入するメリット

i18nを導入すると、ユーザーが使い慣れた言語でサイトを利用できるようになります。 これは単に読みやすさを向上させるだけでなく、ビジネスやコミュニケーション面でもいくつかのメリットがあります。

たとえば、多言語対応サイトを運営することで海外へのアプローチがしやすくなります。 一方で、同じサイト内に異なる言語が混在してしまうと混乱を招くこともあるでしょう。 そのため、Next.jsの仕組みで自然にURLを切り替えて管理することが大切です。

こうした多言語化は、ECサイトやSNS、企業サイトなど幅広い分野で使われています。 実装の際は、どの言語を対象とするのかや翻訳リソースの管理体制など、運用に必要な部分を整理した上で取り組むのが安心ですね。

実装の流れ

ここでは、Next.jsの標準的なi18n設定を利用する手順を大まかにまとめます。 実際の現場では追加でプラグインを活用する場合や、翻訳管理ツールを導入している例もあります。 ただ、まずは基本的な流れを押さえておくことが大事です。

next.config.jsの設定

Next.jsの設定ファイルであるnext.config.jsに、多言語対応のための項目を追記します。 典型的には以下のように、対応言語やデフォルト言語などを定義します。

コピー
/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ["en", "ja"],
    defaultLocale: "en",
  },
};

module.exports = nextConfig;

ここでlocalesに列挙した言語をサイト全体で利用できるようになります。 また、defaultLocaleを英語（"en"）に設定すると、URLパスに/enを含めない場合は英語ページが表示される仕組みになります。

翻訳ファイルの準備

翻訳ファイルは、簡単な例としてプロジェクトルートやpublicフォルダなどにディレクトリを分けて設置するのが一般的です。 たとえば、localesフォルダを作成し、その下にenやjaなど言語コードをフォルダ名として配置します。

ディレクトリ構成の例は以下のとおりです。

コピー
my-nextjs-app/
├─ pages/
├─ locales/
│   ├─ en/
│   │   └─ common.json
│   └─ ja/
│       └─ common.json
└─ next.config.js

ここでは各言語フォルダの中にcommon.jsonなどのJSONファイルを用意し、キーとテキストの対応関係を記述します。 たとえば、en/common.jsonには、以下のような内容を入れておきます。

コピー
{
  "hello": "Hello",
  "message": "Welcome to our website."
}

そして、ja/common.jsonには次のように書いておきます。

コピー
{
  "hello": "こんにちは",
  "message": "当サイトへようこそ。"
}

コンポーネントでの利用方法

Next.jsのi18nを有効化していると、言語コードや翻訳テキストを取得するための仕組みが使いやすくなります。 一例として、useRouterフックを用いて現在のロケール情報を取得したり、翻訳ファイルを直接読み込んでテキストを切り替えたりするアプローチがあります。

次のサンプルでは、Routerからlocaleを取り出して翻訳を読み込む方法のイメージを示します。

コピー
import { useRouter } from "next/router";
import enCommon from "../locales/en/common.json";
import jaCommon from "../locales/ja/common.json";

export default function HomePage() {
  const { locale } = useRouter();
  const t = locale === "ja" ? jaCommon : enCommon;

  return (
    <div>
      <h1>{t.hello}</h1>
      <p>{t.message}</p>
    </div>
  );
}

ここでは、シンプルに言語コードによってJSONファイルを切り替えています。 実務ではより洗練されたライブラリやフックを活用し、複雑な翻訳管理にも対応することが多いです。

SSRやSSGとの組み合わせ

多言語化を考えるときに、SSRやSSGとどう組み合わせるかが気になる方も多いでしょう。 Next.jsではSSRとSSGの両方を使ってページを生成できますが、多言語対応との相性も良好です。

SSRを活用する場合、アクセス時にサーバー側がユーザーのリクエストヘッダなどを参照し、適切な言語リソースを取り込みます。 一方、SSGの場合はビルド時に各ロケールごとの静的ページを生成し、言語ごとにパスを用意する方法が考えられます。 どちらもメリット・デメリットがありますが、トラフィック量や更新頻度に応じて使い分ければ、快適なユーザー体験に繋がります。

業務シーンでの活用例

ここからは、実際の業務現場で多言語対応が活かせる例をいくつか見てみましょう。 どのような場面で役立つのかをイメージすると、自分のプロジェクトにも取り入れやすくなるのではないでしょうか。

ユーザー地域に応じたコンテンツ出し分け

ECサイトなどでは、ユーザーの居住地域や言語設定に応じて製品情報や価格表記を変えるケースがあります。 Next.jsのi18nを利用すれば、URL構造を言語ごとに分けつつコンテンツを切り替えることができます。 ユーザー自身が言語を選択できるUIを用意することで、円滑に国際化対応を実現できます。

フォームやバリデーションへの応用

フォームのエラーメッセージやバリデーションメッセージも多言語化が必要とされる場合があります。 このとき、翻訳ファイルにメッセージ定義をしておき、バリデーションライブラリの出力と連携させることで、ユーザーに親切なエラーメッセージを提供できます。 とくにオンラインサービスの登録フォームや問い合わせフォームなどで役立ちます。

ページ全体の改修工数の削減

運用が長く続くプロジェクトでは、文章やUI文言の変更が定期的に発生します。 i18n対応をしっかり行っておけば、文章修正の際に翻訳ファイルのみを更新すればよい場面が増えます。 コード側での修正が最小限になることは、開発チームにとっても作業を効率化できる要素の一つとなるでしょう。

まとめ

Next.jsのi18n機能を使うと、言語ごとのページ生成がしやすくなり、海外向けや多国籍ユーザーを含むプロジェクトで柔軟な対応がしやすくなります。 翻訳ファイルの管理とnext.config.jsの設定を組み合わせることによって、URLパスやリダイレクトなどの面でもスムーズに運用できるでしょう。

実装にあたっては、翻訳ファイルの構成や言語ごとの文化的差異をどう扱うかなど、運用体制に合わせたカスタマイズも視野に入れてみてください。 初心者の皆さんが取り組む場合も、難しい箇所を小分けにして導入していけば徐々に理解が進むはずです。

多言語化は、アプリケーションの利便性やユーザー数を大きく伸ばすきっかけになるかもしれません。 皆さんのプロジェクトにも、今回の内容をうまく活かしてみてはいかがでしょうか。