Lang x Lang

Internationalization

Next.js は、複数の言語をサポートするためのルーティングとコンテンツのレンダリングを設定することを可能にします。あなたのサイトをさまざまな locales に対応させることは、翻訳されたコンテンツ(ローカライゼーション)と国際化された routes を含みます。

Terminology

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

Routing Overview

推奨される方法は、ブラウザのユーザーの言語設定を使用して、どの locale を使用するかを選択することです。優先言語を変更すると、あなたのアプリケーションに対する Accept-Language の header が変更されます。

例えば、以下のライブラリを使用して、入力される Request を見て、Headers、サポートする予定の locales、そして default locale に基づいて、どの locale を選択するかを決定することができます。

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'

ルーティングは、サブ path(/fr/products)またはドメイン(my-site.fr/products)のいずれかで国際化することができます。この情報をもとに、Middleware 内の locale に基づいてユーザーを redirect することができます。

middleware.js
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 middleware(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 router が異なる locales を動的に route 内で処理し、lang パラメータを全ての layout とページに転送することが可能になります。例えば:

app/[lang]/page.js
// You now have access to the current locale
// e.g. /en-US/products -> `lang` is "en-US"
export default async function Page({ params: { lang } }) {
  return ...
}

新しいフォルダー(例:app/[lang]/layout.js)内にも root layout を入れ子にすることができます。

Localization

ユーザーの優先する locale、つまりローカライゼーションに基づいて表示内容を変更することは、Next.js 特有のものではありません。以下で説明するパターンは、どのウェブアプリケーションでも同じように動作します。

仮定してみましょう、私たちはアプリケーション内で英語とオランダ語の両方のコンテンツをサポートしたいと思うとします。私たちは 2 つの異なる”dictionaries”を保持するかもしれません。これらは、私たちに特定のキーからローカライズされた string へのマッピングを提供する Object です。例えば:

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

その後、要求された locale の翻訳をロードするための 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]()

現在選択されている言語を考慮に入れると、私たちは layout またはページ内部の辞書を fetch できます。

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/ディレクトリ内のすべての Layout とページは、default で Server Components を使用するため、翻訳ファイルの size が Client 側の JavaScript バンドルの size に影響を及ぼすことを心配する必要はありません。この code は server 上でのみ実行され、生成された HTML のみがブラウザに送信されます。

Static Generation

指定の locales セットの静な routes を生成するために、私たちは任意のページや layout に generateStaticParams を使用することができます。これは全体的に、例えば、root layout の中で使用することができます:

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

Resources

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use