国際化

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

用語

ロケール: 言語および書式設定の優先順位のセットを識別する識別子。通常、ユーザーの優先言語と、場合によっては地理的地域が含まれます。
- en-US: アメリカ合衆国で話されている英語
- nl-NL: オランダで話されているオランダ語
- nl: オランダ語、特定の地域なし

ルーティングの概要

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

たとえば、次のライブラリを使用して、Headers、サポートする予定のロケール、およびデフォルトのロケールに基づいて、着信 Request を調べて、選択するロケールを決定できます。

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) のいずれかによって国際化できます。この情報があれば、Proxy 内のロケールに基づいてユーザーをリダイレクトできます。

import { NextResponse } from "next/server";
 
let locales = ['en-US', 'nl-NL', 'nl']
 
// Get the preferred locale, similar to the above or using a library
function getLocale(request) { ... }
 
export function proxy(request) {
  // Check if there is any supported locale in the pathname
  const { pathname } = request.nextUrl
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )
 
  if (pathnameHasLocale) return
 
  // Redirect if there is no locale
  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  // e.g. incoming request is /products
  // The new URL is now /en-US/products
  return NextResponse.redirect(request.nextUrl)
}
 
export const config = {
  matcher: [
    // Skip all internal paths (_next)
    '/((?!_next).*)',
    // Optional: only run on root (/) URL
    // '/'
  ],
}

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

// You now have access to the current locale
// e.g. /en-US/products -> `lang` is "en-US"
export default async function Page({
  params,
}: {
  params: Promise<{ lang: string }>
}) {
  const { lang } = await params
  return ...
}

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

ローカリゼーション

ユーザーの優先ロケールに基づいて表示コンテンツを変更すること、つまりローカリゼーションは、Next.js に固有のものではありません。以下に説明するパターンは、どの Web アプリケーションでも同じように機能します。

たとえば、アプリケーション内で英語とオランダ語の両方のコンテンツをサポートしたいとします。キーからローカライズされた文字列へのマッピングを提供する 2 つの異なる「辞書」を維持する場合があります。たとえば、

{
  "products": {
    "cart": "Add to Cart"
  }
}

{
  "products": {
    "cart": "Toevoegen aan Winkelwagen"
  }
}

次に、getDictionary 関数を作成して、要求されたロケールの翻訳を読み込むことができます。

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: 'en' | 'nl') =>
  dictionaries[locale]()

現在選択されている言語がわかれば、レイアウトまたはページ内で辞書を取得できます。

import { getDictionary } from './dictionaries'
 
export default async function Page({
  params,
}: {
  params: Promise<{ lang: 'en' | 'nl' }>
}) {
  const { lang } = await params
  const dict = await getDictionary(lang) // en
  return <button>{dict.products.cart}</button> // Add to Cart
}

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

静的レンダリング

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

export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'de' }]
}
 
export default async function RootLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode
  params: Promise<{ lang: 'en-US' | 'de' }>
}>) {
  return (
    <html lang={(await params).lang}>
      <body>{children}</body>
    </html>
  )
}

国際化

用語

ルーティングの概要

ローカリゼーション

静的レンダリング

リソース