Menu

国際化

Next.jsは、複数の言語をサポートするためにルーティングとコンテンツのレンダリングを構成することを可能にします。サイトを異なるロケールに適応させることには、翻訳されたコンテンツ（ローカライゼーション）と国際化されたルートが含まれます。

用語

  • ロケール: 言語と書式設定の環境設定のための識別子。通常、ユーザーの優先言語と可能であれば地理的地域が含まれます。
    • en-US: アメリカ合衆国で話される英語
    • nl-NL: オランダで話されるオランダ語
    • nl: オランダ語、特定の地域なし

ルーティングの概要

使用するロケールの選択には、ブラウザでのユーザーの言語設定を使用することをおすすめします。優先言語を変更すると、アプリケーションへの受信Accept-Languageヘッダーが変更されます。

例えば、以下のライブラリを使用して、受信RequestのHeaders、サポートを予定しているロケール、およびデフォルトロケールに基づいてどのロケールを選択するかを判断できます。

middleware.js
import { match } from '@formatjs/intl-localematcher'
import Negotiator from 'negotiator'
 
let headers = { 'accept-language': 'en-US,en;q=0.5' }
let languages = new Negotiator({ headers }).languages()
let locales = ['en-US', 'nl-NL', 'nl']
let defaultLocale = 'en-US'
 
match(languages, locales, defaultLocale) // -> 'en-US'

ルーティングは、サブパス（/fr/products）またはドメイン（my-site.fr/products）のいずれかで国際化できます。この情報を使用して、ミドルウェア内でロケールに基づいてユーザーをリダイレクトできます。

middleware.js
import { NextResponse } from "next/server";
 
let locales = ['en-US', 'nl-NL', 'nl']
 
// 上記と同様、またはライブラリを使用して優先ロケールを取得
function getLocale(request) { ... }
 
export function middleware(request) {
  // パス名に対応するロケールがあるかチェック
  const { pathname } = request.nextUrl
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )
 
  if (pathnameHasLocale) return
 
  // ロケールがない場合はリダイレクト
  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  // 例：受信リクエストが /products の場合
  // 新しいURLは /en-US/products になります
  return NextResponse.redirect(request.nextUrl)
}
 
export const config = {
  matcher: [
    // 内部パス (_next) をスキップ
    '/((?!_next).*)',
    // オプション: ルート (/) URLでのみ実行
    // '/'
  ],
}

最後に、app/内のすべての特殊ファイルをapp/[lang]の下にネストします。これにより、Next.jsルーターが異なるロケールを動的に処理し、langパラメーターをすべてのレイアウトとページに転送できます。例：

app/[lang]/page.js
// 現在のロケールにアクセス可能
// 例 /en-US/products -> `lang` は "en-US"
export default async function Page({ params: { lang } }) {
  return ...
}

ルートレイアウトも新しいフォルダー内にネストできます（例：app/[lang]/layout.js）。

ローカライゼーション

ユーザーの優先ロケールに基づいて表示コンテンツを変更する、いわゆるローカライゼーションは、Next.js特有のものではありません。以下に説明するパターンは、任意のウェブアプリケーションでも同様に機能します。

アプリケーション内で英語とオランダ語の両方のコンテンツをサポートすることを想定します。2つの異なる「辞書」を管理する可能性があります。これらは、キーからローカライズされた文字列へのマッピングを提供するオブジェクトです。例：

dictionaries/en.json
{
  "products": {
    "cart": "Add to Cart"
  }
}
dictionaries/nl.json
{
  "products": {
    "cart": "Toevoegen aan Winkelwagen"
  }
}

要求されたロケールの翻訳をロードするgetDictionary関数を作成できます：

app/[lang]/dictionaries.js
import 'server-only'
 
const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  nl: () => import('./dictionaries/nl.json').then((module) => module.default),
}
 
export const getDictionary = async (locale) => dictionaries[locale]()

現在選択されている言語に基づいて、レイアウトまたはページ内で辞書をフェッチできます。

app/[lang]/page.js
import { getDictionary } from './dictionaries'
 
export default async function Page({ params: { lang } }) {
  const dict = await getDictionary(lang) // en
  return <button>{dict.products.cart}</button> // Add to Cart
}

app/ディレクトリ内のすべてのレイアウトとページがデフォルトでサーバーコンポーネントになるため、翻訳ファイルのサイズがクライアントサイドのJavaScriptバンドルサイズに影響することを心配する必要はありません。このコードはサーバー上でのみ実行され、結果のHTMLのみがブラウザに送信されます。

静的生成

特定のロケールセットの静的ルートを生成するには、任意のページまたはレイアウトでgenerateStaticParamsを使用できます。これはグローバルに、例えばルートレイアウトで行えます：

app/[lang]/layout.js
export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'de' }]
}
 
export default function Root({ children, params }) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  )
}

リソース