多言語対応の基盤(i18n)： Next.js標準の next-intl ライブラリ

U3
2026/2/27
2026/2/27

Next.jsで多言語対応（i18n）を実装する際、現在もっとも推奨される選択肢の一つが next-intl です。

App Router環境との親和性が非常に高く、TypeScriptでの型安全性や、サーバーコンポーネントでのレンダリングに最適化されています。

next-intl の主な特徴

  1. App Router 対応: Server Components での直接的な翻訳呼び出しが可能。
  2. 型安全: メッセージ定義から TypeScript の型を自動生成し、存在しないキーへのアクセスをコンパイル時に検知できる。
  3. 柔軟なルーティング: URLへのロケール接頭辞（/en/about など）の付与や、Cookie/Header を使ったロケール判定が容易。
  4. 動的ローカライズ: 日付、時刻、数値のフォーマットも組み込みで対応。

実装の基本ステップ

1. インストール

Bash


npm install next-intl

2. ディレクトリ構成

推奨される構成例です：

Plaintext


/messages
/en.json
/ja.json
/src
/i18n.ts # 設定ファイル
/middleware.ts # ルーティング制御

3. メッセージ定義 (messages/ja.json)

JSON


{
"Index": {
"title": "こんにちは、世界！"
}
}

4. コンポーネントでの利用

サーバーコンポーネントで非常にシンプルに記述できます。

TypeScript


import {useTranslations} from 'next-intl';

export default function HomePage() {
const t = useTranslations('Index');
return <h1>{t('title')}</h1>;
}

検討すべきポイント

next-intl を導入する際は、以下の設計判断が重要になります。

考慮事項

内容

ルーティング戦略

URL にロケールを含めるか (/ja/path)、サブドメイン/Cookie で判定するか。

辞書管理

JSON ファイルを直接管理するか、Contentful などの CMS から API 経由で取得するか。

型定義

next-intl の型生成機能を活用し、開発時のミスを最小化する。

少しだけ注意点も

Next.jsと next-intl は強力ですが、以下の点はプロジェクト開始前に決めておく必要があります。

  1. 辞書ファイルの管理: ページが増えると ja.json が数千行になることもあります。ファイル分割の戦略を最初に決めておかないと、後でカオスになりがちです。
  2. 動的コンテンツ: データベースから取得したユーザー名や動的なエラーメッセージの翻訳など、少し複雑なロジックが必要な場面もあります。

コメント

コメントはまだありません。