国際化

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

用語

Locale: 一連の言語および形式設定の優先事項の識別子。通常、ユーザーの好みの言語とおそらく地理的な地域が含まれます。
- 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内でロケールに基づいてユーザーをリダイレクトすることができます。

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).*)',
    // 任意: root (/) URL でのみ実行
    // '/'
  ],
}

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

app/[lang]/page.js
// 現在のロケールにアクセスできるようになります
// 例: /en-US/products -> `lang`は"en-US"
export default async function Page({ params: { lang } }) {
  return ...
}

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

地域化

ユーザーの好みのロケールに基づいて表示されるコンテンツを変更する、つまり地域化はNext.jsに特有のものではありません。以下で説明するパターンは、任意のWebアプリケーションでも同様に機能します。

アプリケーション内で英語とオランダ語のコンテンツの両方をサポートしたいと仮定しましょう。いくつかのキーから地域化された文字列へのマッピングを提供するオブジェクトである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> // カートに追加
}

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

静的生成

特定のロケールセットに対して静的ルートを生成するには、generateStaticParamsをページやレイアウトで使用します。例えば、root レイアウトでこれをグローバルに行うことができます:

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>
  )
}

用語​

ルーティングの概要​

地域化​

静的生成​

リソース​

用語

ルーティングの概要

地域化

静的生成

リソース