作成:2025-11-01最終更新:2025-11-01

GitHubでアプリケーションテンプレートを見る

このページにはアプリケーションテンプレートが用意されています。

このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します

AIアシスタントにMCP Serverを追加

Intlayer MCPサーバーを統合することで、ChatGPT、DeepSeek、Cursor、VSCodeなどから直接ドキュメントを取得できます。

MCPサーバーのドキュメントを表示

バージョン履歴

初版
v7.0.02025/11/1

このページのコンテンツはAIを使用して翻訳されました。

英語の元のコンテンツの最新バージョンを見る

このドキュメントを編集

このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

ドキュメントへのGitHubリンク

コピー

ドキュメントのMarkdownをクリップボードにコピー

2025年版 next-intl を使った Next.js アプリケーションの国際化方法

next-intl とは？

next-intl は、Next.js の App Router 向けに特別に設計された人気の国際化（i18n）ライブラリです。優れた TypeScript サポートと組み込みの最適化機能を備え、多言語対応の Next.js アプリケーションをシームレスに構築する方法を提供します。

ご希望であれば、next-i18next ガイドや、直接 Intlayer を参照することもできます。

比較については、next-i18next vs next-intl vs Intlayer をご覧ください。

守るべきプラクティス

実装に入る前に、以下のプラクティスを守ることをお勧めします：

HTMLのlangとdir属性を設定する
レイアウト内でgetLocaleDirection(locale)を使ってdirを計算し、適切なアクセシビリティとSEOのために<html lang={locale} dir={dir}>を設定します。
メッセージをネームスペースごとに分割する
ロケールとネームスペースごとにJSONファイルを整理し（例：common.json、about.json）、必要なものだけを読み込みます。
クライアントのペイロードを最小化する
ページ上では、必要なネームスペースのみをNextIntlClientProviderに送信します（例：pick(messages, ['common', 'about'])）。
静的ページを優先する
パフォーマンスとSEO向上のために、可能な限り静的ページを使用します。
サーバーコンポーネントでのi18n
サーバーコンポーネントは、ページやclientとしてマークされていないすべてのコンポーネントのように静的であり、ビルド時にプリレンダリングできます。したがって、翻訳関数をプロップとして渡す必要があります。
TypeScriptの型設定
アプリケーション全体で型安全を確保するために、ロケールの型を設定します。
リダイレクト用プロキシ
ロケール検出とルーティングを処理し、ユーザーを適切なロケール接頭辞付きURLにリダイレクトするためにプロキシを使用します。
メタデータ、サイトマップ、robots.txtの国際化
Next.jsが提供するgenerateMetadata関数を使用して、メタデータ、サイトマップ、robots.txtを国際化し、すべてのロケールで検索エンジンによるより良い検出を確保します。
リンクのローカライズ
Linkコンポーネントを使用してリンクをローカライズし、ユーザーを適切なロケール接頭辞付きURLにリダイレクトします。すべてのロケールでページの発見性を確保することが重要です。
テストと翻訳の自動化 テストと翻訳の自動化は、多言語アプリケーションのメンテナンスにかかる時間を削減します。

国際化とSEOに関して知っておくべきすべてをまとめたドキュメントをご覧ください: next-intlによる国際化 (i18n)。

Next.jsアプリケーションでnext-intlをセットアップするステップバイステップガイド

GitHub の Application Template を参照してください。

これから作成するプロジェクト構造は以下の通りです：

.├── global.ts├── locales│   ├── en│   │  ├── common.json│   │  └── about.json│   ├── fr│   │  ├── common.json│   │  └── about.json│   └── es│      ├── common.json│      └── about.json└── src # src はオプションです    ├── proxy.ts    ├── app    │   ├── i18n.ts    │   └── [locale]    │       ├── layout.tsx    │       ├── (home) # / （ホームリソースで全ページを汚染しないためのルートグループ）    │       │   ├── layout.tsx    │       │   └── page.tsx    │       └── about # /about    │           ├── layout.tsx    │           └── page.tsx    └── components        ├── ClientComponent.tsx        └── ServerComponent.tsx

.├── global.ts├── locales│   ├── en│   │  ├── common.json│   │  └── about.json│   ├── fr│   │  ├── common.json│   │  └── about.json│   └── es│      ├── common.json│      └── about.json└── src # src はオプションです    ├── proxy.ts    ├── app    │   ├── i18n.ts    │   └── [locale]    │       ├── layout.tsx    │       ├── (home) # / （ホームリソースで全ページを汚染しないためのルートグループ）    │       │   ├── layout.tsx    │       │   └── page.tsx    │       └── about # /about    │           ├── layout.tsx    │           └── page.tsx    └── components        ├── ClientComponent.tsx        └── ServerComponent.tsx

ステップ1: 依存関係のインストール

npmを使って必要なパッケージをインストールします：

npm install next-intl

next-intl: Next.js App Router向けのコア国際化ライブラリで、翻訳管理のためのフック、サーバー関数、クライアントプロバイダーを提供します。

ステップ2: プロジェクトの設定

サポートするロケールを定義し、next-intlのリクエスト設定を行う設定ファイルを作成します。このファイルはi18n設定の単一の信頼できる情報源として機能し、アプリケーション全体で型安全性を保証します。

ロケール設定を一元化することで不整合を防ぎ、将来的にロケールの追加や削除を容易にします。getRequestConfig関数はすべてのリクエストで実行され、各ページに必要な翻訳のみを読み込むため、コード分割が可能になりバンドルサイズを削減します。

src/i18n.ts

コードをコピー

コードをクリップボードにコピー

import { notFound } from "next/navigation";import createMiddleware from "next-intl/middleware";import { createNavigation } from "next-intl/navigation";// 型安全にサポートするロケールを定義export const locales = ["en", "fr", "es"] as const;export type Locale = (typeof locales)[number];export const defaultLocale: Locale = "en";export function isRTL(locale: Locale | (string & {})) {  return /^(ar|fa|he|iw|ur|ps|sd|ug|yi|ckb|ku)(-|$)/i.test(locale);}// ロケールごとにメッセージを動的に読み込み、コード分割を可能にする// Promise.all はパフォーマンス向上のため名前空間を並列で読み込むasync function loadMessages(locale: Locale) {  // レイアウトやページで必要な名前空間のみを読み込む  const [common, home, about] = await Promise.all([    import(`../locales/${locale}/common.json`).then((m) => m.default),    import(`../locales/${locale}/home.json`).then((m) => m.default),    import(`../locales/${locale}/about.json`).then((m) => m.default),    // ... 将来的に追加するJSONファイルはここに追加してください  ]);  return { common, home, about } as const;}// ローカライズされたURLを生成するヘルパー関数（例: /about と /fr/about）export function localizedPath(locale: string, path: string) {  return locale === defaultLocale ? path : `/${locale}${path}`;}// getRequestConfigは各リクエストで実行され、サーバーコンポーネントにメッセージを提供します// ここでnext-intlがNext.jsのサーバーサイドレンダリングにフックしますexport default async function getRequestConfig({  requestLocale,}: {  requestLocale: Promise<string | undefined>;}) {  const requested: Locale = ((await requestLocale) as Locale) ?? defaultLocale;  if (!locales.includes(requested)) notFound();  return {    locale: requested,    messages: await loadMessages(requested),  };}export function getCookie(locale: Locale) {  return [    `NEXT_LOCALE=${locale}`,    "Path=/",    `Max-Age=${60 * 60 * 24 * 365}`, // 1年    "SameSite=Lax",  ].join("; ");}const routingOptions = {  locales,  defaultLocale,  localePrefix: "as-needed", // /en/... のルートを /... に変更  // オプション: ローカライズされたパス名  // pathnames: {  //   '/': '/',  //   '/about': {en: '/about', fr: '/a-propos', es: '/acerca-de'},  //   '/blog/[slug]': '/blog/[slug]'  // }  //  localeDetection: true, // クッキーからの "/" -> "/en" リダイレクトを防止} as const;export const { Link, redirect, usePathname, useRouter, getPathname } =  createNavigation(routingOptions);export const proxy = createMiddleware(routingOptions);

import { notFound } from "next/navigation";import createMiddleware from "next-intl/middleware";import { createNavigation } from "next-intl/navigation";// 型安全にサポートするロケールを定義export const locales = ["en", "fr", "es"] as const;export type Locale = (typeof locales)[number];export const defaultLocale: Locale = "en";export function isRTL(locale: Locale | (string & {})) {  return /^(ar|fa|he|iw|ur|ps|sd|ug|yi|ckb|ku)(-|$)/i.test(locale);}// ロケールごとにメッセージを動的に読み込み、コード分割を可能にする// Promise.all はパフォーマンス向上のため名前空間を並列で読み込むasync function loadMessages(locale: Locale) {  // レイアウトやページで必要な名前空間のみを読み込む  const [common, home, about] = await Promise.all([    import(`../locales/${locale}/common.json`).then((m) => m.default),    import(`../locales/${locale}/home.json`).then((m) => m.default),    import(`../locales/${locale}/about.json`).then((m) => m.default),    // ... 将来的に追加するJSONファイルはここに追加してください  ]);  return { common, home, about } as const;}// ローカライズされたURLを生成するヘルパー関数（例: /about と /fr/about）export function localizedPath(locale: string, path: string) {  return locale === defaultLocale ? path : `/${locale}${path}`;}// getRequestConfigは各リクエストで実行され、サーバーコンポーネントにメッセージを提供します// ここでnext-intlがNext.jsのサーバーサイドレンダリングにフックしますexport default async function getRequestConfig({  requestLocale,}: {  requestLocale: Promise<string | undefined>;}) {  const requested: Locale = ((await requestLocale) as Locale) ?? defaultLocale;  if (!locales.includes(requested)) notFound();  return {    locale: requested,    messages: await loadMessages(requested),  };}export function getCookie(locale: Locale) {  return [    `NEXT_LOCALE=${locale}`,    "Path=/",    `Max-Age=${60 * 60 * 24 * 365}`, // 1年    "SameSite=Lax",  ].join("; ");}const routingOptions = {  locales,  defaultLocale,  localePrefix: "as-needed", // /en/... のルートを /... に変更  // オプション: ローカライズされたパス名  // pathnames: {  //   '/': '/',  //   '/about': {en: '/about', fr: '/a-propos', es: '/acerca-de'},  //   '/blog/[slug]': '/blog/[slug]'  // }  //  localeDetection: true, // クッキーからの "/" -> "/en" リダイレクトを防止} as const;export const { Link, redirect, usePathname, useRouter, getPathname } =  createNavigation(routingOptions);export const proxy = createMiddleware(routingOptions);

ステップ3: 動的ロケールルートの定義

ロケールごとの動的ルーティングを設定するために、アプリフォルダ内に [locale] ディレクトリを作成します。これにより、Next.js はロケールベースのルーティングを処理でき、各ロケールが URL セグメント（例：/en/about、/fr/about）になります。

動的ルートを使用することで、Next.js はビルド時にすべてのロケールの静的ページを生成でき、パフォーマンスとSEOが向上します。レイアウトコンポーネントは、ロケールに基づいて HTML の lang と dir 属性を設定し、アクセシビリティや検索エンジンの理解に重要です。

src/app/[locale]/layout.tsx

コードをコピー

コードをクリップボードにコピー

import type { ReactNode } from "react";import { locales } from "@/i18n";import { getLocaleDirection, setRequestLocale } from "next-intl/server";// ビルド時にすべてのロケールの静的ページを事前生成（SSG）// これによりパフォーマンスとSEOが向上しますexport function generateStaticParams() {  return locales.map((locale) => ({ locale }));}export default function LocaleLayout({  children,  params,}: {  children: ReactNode;  params: Promise<{ locale: string }>;}) {  // Next.jsのApp Routerでは、paramsはPromise（await可能）  // これにより、動的ルートセグメントを非同期に解決できる  const { locale } = await params;  // 重要: setRequestLocaleはnext-intlにこのリクエストで使用するロケールを伝える  // これがないと、getTranslations()はサーバーコンポーネントでどのロケールを使うか分からない  setRequestLocale(locale);  // 適切なHTMLレンダリングのためにテキストの方向（LTR/RTL）を取得  const dir = getLocaleDirection(locale);  return (    <html lang={locale} dir={dir}>      <body>{children}</body>    </html>  );}}

import type { ReactNode } from "react";import { locales } from "@/i18n";import { getLocaleDirection, setRequestLocale } from "next-intl/server";// ビルド時にすべてのロケールの静的ページを事前生成（SSG）// これによりパフォーマンスとSEOが向上しますexport function generateStaticParams() {  return locales.map((locale) => ({ locale }));}export default function LocaleLayout({  children,  params,}: {  children: ReactNode;  params: Promise<{ locale: string }>;}) {  // Next.jsのApp Routerでは、paramsはPromise（await可能）  // これにより、動的ルートセグメントを非同期に解決できる  const { locale } = await params;  // 重要: setRequestLocaleはnext-intlにこのリクエストで使用するロケールを伝える  // これがないと、getTranslations()はサーバーコンポーネントでどのロケールを使うか分からない  setRequestLocale(locale);  // 適切なHTMLレンダリングのためにテキストの方向（LTR/RTL）を取得  const dir = getLocaleDirection(locale);  return (    <html lang={locale} dir={dir}>      <body>{children}</body>    </html>  );}}

src/app/[locale]/about/page.tsx

コードをコピー

コードをクリップボードにコピー

import { getTranslations, getMessages, getFormatter } from "next-intl/server";import { NextIntlClientProvider } from "next-intl";import pick from "lodash/pick";import ServerComponent from "@/components/ServerComponent";import ClientComponent from "@/components/ClientComponent";export default async function AboutPage({  params,}: {  params: Promise<{ locale: string }>;}) {  const { locale } = await params;  // メッセージはサーバー側でロードされます。クライアントには必要なものだけを渡します。  // これにより、ブラウザに送信されるJavaScriptバンドルが最小化されます  const messages = await getMessages();  const clientMessages = pick(messages, ["common", "about"]);  // 完全にサーバー側での翻訳/フォーマット処理  // これらはサーバー上で実行され、コンポーネントにpropsとして渡すことができます  const tAbout = await getTranslations("about");  const tCounter = await getTranslations("about.counter");  const format = await getFormatter();  const initialFormattedCount = format.number(0);  return (    // NextIntlClientProviderはクライアントコンポーネントで翻訳を利用可能にします    // クライアントコンポーネントが実際に使用する名前空間のみを渡します    <NextIntlClientProvider locale={locale} messages={clientMessages}>      <main>        <h1>{tAbout("title")}</h1>        <ClientComponent />        <ServerComponent          formattedCount={initialFormattedCount}          label={tCounter("label")}          increment={tCounter("increment")}        />      </main>    </NextIntlClientProvider>  );}

import { getTranslations, getMessages, getFormatter } from "next-intl/server";import { NextIntlClientProvider } from "next-intl";import pick from "lodash/pick";import ServerComponent from "@/components/ServerComponent";import ClientComponent from "@/components/ClientComponent";export default async function AboutPage({  params,}: {  params: Promise<{ locale: string }>;}) {  const { locale } = await params;  // メッセージはサーバー側でロードされます。クライアントには必要なものだけを渡します。  // これにより、ブラウザに送信されるJavaScriptバンドルが最小化されます  const messages = await getMessages();  const clientMessages = pick(messages, ["common", "about"]);  // 完全にサーバー側での翻訳/フォーマット処理  // これらはサーバー上で実行され、コンポーネントにpropsとして渡すことができます  const tAbout = await getTranslations("about");  const tCounter = await getTranslations("about.counter");  const format = await getFormatter();  const initialFormattedCount = format.number(0);  return (    // NextIntlClientProviderはクライアントコンポーネントで翻訳を利用可能にします    // クライアントコンポーネントが実際に使用する名前空間のみを渡します    <NextIntlClientProvider locale={locale} messages={clientMessages}>      <main>        <h1>{tAbout("title")}</h1>        <ClientComponent />        <ServerComponent          formattedCount={initialFormattedCount}          label={tCounter("label")}          increment={tCounter("increment")}        />      </main>    </NextIntlClientProvider>  );}

ステップ4: 翻訳ファイルを作成する

各ロケールと名前空間ごとにJSONファイルを作成します。この構造により、翻訳を論理的に整理し、各ページに必要なものだけを読み込むことができます。

名前空間ごとに翻訳を整理することで（例：common.json、about.json）、コード分割が可能になり、バンドルサイズを削減できます。これにより、各ページに必要な翻訳のみを読み込むため、パフォーマンスが向上します。

locales/en/common.json

コードをコピー

コードをクリップボードにコピー

{  "welcome": "Welcome",  "greeting": "Hello, world!"}

locales/fr/common.json

コードをコピー

コードをクリップボードにコピー

{  "welcome": "Bienvenue",  "greeting": "Bonjour le monde!"}

locales/en/about.json

コードをコピー

コードをクリップボードにコピー

{  "title": "About",  "description": "About page description",  "counter": {    "label": "Counter",    "increment": "Increment"  }}

{  "title": "About",  "description": "About page description",  "counter": {    "label": "Counter",    "increment": "Increment"  }}

locales/fr/about.json

コードをコピー

コードをクリップボードにコピー

{  "title": "À propos",  "description": "Description de la page À propos",  "counter": {    "label": "Compteur",    "increment": "Incrémenter"  }}

{  "title": "À propos",  "description": "Description de la page À propos",  "counter": {    "label": "Compteur",    "increment": "Incrémenter"  }}

ステップ5: ページで翻訳を利用する

サーバーで翻訳を読み込み、それをサーバーコンポーネントとクライアントコンポーネントの両方に渡すページコンポーネントを作成します。これにより、レンダリング前に翻訳が読み込まれ、コンテンツのフラッシュを防止します。

サーバーサイドでの翻訳読み込みはSEOを向上させ、FOUC（未翻訳コンテンツのフラッシュ）を防ぎます。pickを使用して必要な名前空間のみをクライアントプロバイダーに送ることで、ブラウザに送信されるJavaScriptバンドルを最小化します。

src/app/[locale]/about/page.tsx

コードをコピー

コードをクリップボードにコピー

import { getTranslations, getMessages, getFormatter } from "next-intl/server";import { NextIntlClientProvider } from "next-intl";import pick from "lodash/pick";import ServerComponent from "@/components/ServerComponent";import ClientComponent from "@/components/ClientComponent";export default async function AboutPage({  params,}: {  params: Promise<{ locale: string }>;}) {  const { locale } = await params;  // メッセージはサーバー側で読み込まれます。クライアントには必要なものだけを渡します。  // これにより、ブラウザに送信されるJavaScriptバンドルが最小化されます  const messages = await getMessages();  const clientMessages = pick(messages, ["common", "about"]);  // 完全にサーバー側での翻訳/フォーマット処理  // これらはサーバー上で実行され、コンポーネントにpropsとして渡すことができます  const tAbout = await getTranslations("about");  const tCounter = await getTranslations("about.counter");  const format = await getFormatter();  const initialFormattedCount = format.number(0);  return (    // NextIntlClientProvider はクライアントコンポーネントで翻訳を利用可能にします    // クライアントコンポーネントが実際に使用する名前空間のみを渡してください    <NextIntlClientProvider locale={locale} messages={clientMessages}>      <main>        <h1>{tAbout("title")}</h1>        <ClientComponent />        <ServerComponent          formattedCount={initialFormattedCount}          label={tCounter("label")}          increment={tCounter("increment")}        />      </main>    </NextIntlClientProvider>  );}

import { getTranslations, getMessages, getFormatter } from "next-intl/server";import { NextIntlClientProvider } from "next-intl";import pick from "lodash/pick";import ServerComponent from "@/components/ServerComponent";import ClientComponent from "@/components/ClientComponent";export default async function AboutPage({  params,}: {  params: Promise<{ locale: string }>;}) {  const { locale } = await params;  // メッセージはサーバー側で読み込まれます。クライアントには必要なものだけを渡します。  // これにより、ブラウザに送信されるJavaScriptバンドルが最小化されます  const messages = await getMessages();  const clientMessages = pick(messages, ["common", "about"]);  // 完全にサーバー側での翻訳/フォーマット処理  // これらはサーバー上で実行され、コンポーネントにpropsとして渡すことができます  const tAbout = await getTranslations("about");  const tCounter = await getTranslations("about.counter");  const format = await getFormatter();  const initialFormattedCount = format.number(0);  return (    // NextIntlClientProvider はクライアントコンポーネントで翻訳を利用可能にします    // クライアントコンポーネントが実際に使用する名前空間のみを渡してください    <NextIntlClientProvider locale={locale} messages={clientMessages}>      <main>        <h1>{tAbout("title")}</h1>        <ClientComponent />        <ServerComponent          formattedCount={initialFormattedCount}          label={tCounter("label")}          increment={tCounter("increment")}        />      </main>    </NextIntlClientProvider>  );}

ステップ6: クライアントコンポーネントでの翻訳の使用

クライアントコンポーネントは、useTranslations と useFormatter フックを使用して翻訳およびフォーマット関数にアクセスできます。これらのフックは NextIntlClientProvider コンテキストから読み取ります。

クライアントコンポーネントは翻訳にアクセスするために React フックを必要とします。useTranslations と useFormatter フックは next-intl とシームレスに統合されており、ロケールが変更された際にリアクティブに更新されます。

ページのクライアントメッセージに必要な名前空間を追加することを忘れないでください（クライアントコンポーネントが実際に必要とする名前空間のみを含めてください）。

src/components/ClientComponent.tsx

コードをコピー

コードをクリップボードにコピー

"use client";import React, { useState } from "react";import { useTranslations, useFormatter } from "next-intl";const ClientComponent = () => {  // ネストされたオブジェクトに直接スコープを設定  // useTranslations/useFormatter は NextIntlClientProvider コンテキストから読み取るフックです  // コンポーネントが NextIntlClientProvider でラップされている場合にのみ動作します  const t = useTranslations("about.counter");  const format = useFormatter();  const [count, setCount] = useState(0);  return (    <div>      <p>{format.number(count)}</p>      <button        aria-label={t("label")}        onClick={() => setCount((count) => count + 1)}      >        {t("increment")}      </button>    </div>  );};

"use client";import React, { useState } from "react";import { useTranslations, useFormatter } from "next-intl";const ClientComponent = () => {  // ネストされたオブジェクトに直接スコープを設定  // useTranslations/useFormatter は NextIntlClientProvider コンテキストから読み取るフックです  // コンポーネントが NextIntlClientProvider でラップされている場合にのみ動作します  const t = useTranslations("about.counter");  const format = useFormatter();  const [count, setCount] = useState(0);  return (    <div>      <p>{format.number(count)}</p>      <button        aria-label={t("label")}        onClick={() => setCount((count) => count + 1)}      >        {t("increment")}      </button>    </div>  );};

ステップ7: サーバーコンポーネントでの翻訳の使用

サーバーコンポーネントは React フックを使用できないため、親コンポーネントから props 経由で翻訳とフォーマッターを受け取ります。この方法により、サーバーコンポーネントは同期的に保たれ、クライアントコンポーネント内にネストすることが可能になります。

クライアント境界内にネストされる可能性のあるサーバーコンポーネントは同期的である必要があります。翻訳済みの文字列やフォーマット済みの値をpropsとして渡すことで、非同期処理を回避し、適切なレンダリングを保証します。親のページコンポーネントで翻訳とフォーマットを事前に計算してください。

src/components/ServerComponent.tsx

コードをコピー

コードをクリップボードにコピー

// クライアントコンポーネント内にネストされたサーバーコンポーネントは同期的でなければなりません// Reactはサーバー/クライアント境界を越えた非同期関数をシリアライズできません// 解決策：親で翻訳/フォーマットを事前計算し、propsとして渡すtype ServerComponentProps = {  formattedCount: string;  label: string;  increment: string;};const ServerComponent = ({  formattedCount,  label,  increment,}: ServerComponentProps) => {  return (    <div>      <p>{formattedCount}</p>      <button aria-label={label}>{increment}</button>    </div>  );};

// クライアントコンポーネント内にネストされたサーバーコンポーネントは同期的でなければなりません// Reactはサーバー/クライアント境界を越えた非同期関数をシリアライズできません// 解決策：親で翻訳/フォーマットを事前計算し、propsとして渡すtype ServerComponentProps = {  formattedCount: string;  label: string;  increment: string;};const ServerComponent = ({  formattedCount,  label,  increment,}: ServerComponentProps) => {  return (    <div>      <p>{formattedCount}</p>      <button aria-label={label}>{increment}</button>    </div>  );};

ページやレイアウト内で、next-intl/server から getTranslations と getFormatter を使用して翻訳とフォーマットを事前計算し、それらを props としてサーバーコンポーネントに渡してください。

（オプション）ステップ8: コンテンツの言語を変更する

next-intl を使ってコンテンツの言語を変更するには、同じパス名を指しながらロケールを切り替えるロケール対応リンクをレンダリングします。プロバイダーが URL を自動的に書き換えるため、現在のルートをターゲットにするだけで済みます。

src/components/LocaleSwitcher.tsx

コードをコピー

コードをクリップボードにコピー

"use client";import Link from "next/link";import { usePathname } from "next/navigation";import { useLocale } from "next-intl";import { defaultLocale, getCookie, type Locale, locales } from "@/i18n";const getLocaleLabel = (locale: Locale): string => {  try {    const displayNames = new Intl.DisplayNames([locale], { type: "language" });    return displayNames.of(locale) ?? locale.toUpperCase();  } catch {    return locale.toUpperCase();  }};const localeFlags: Record<Locale, string> = {  en: "🇬🇧",  fr: "🇫🇷",  es: "🇪🇸",};export default function LocaleSwitcher() {  const activeLocale = useLocale();  const pathname = usePathname();  // パス名からロケールのプレフィックスを削除してベースパスを取得する  const getBasePath = (path: string) => {    for (const locale of locales) {      if (path.startsWith(`/${locale}`)) {        return path.slice(locale.length + 1) || "/";      }    }    return path;  };  const basePath = getBasePath(pathname);  return (    <nav aria-label="言語セレクター">      <div>        {(locales as readonly Locale[]).map((locale) => {          const isActive = locale === activeLocale;          // デフォルトロケールかどうかに基づいてhrefを構築          const href =            locale === defaultLocale ? basePath : `/${locale}${basePath}`;          return (            <Link              key={locale}              href={href}              aria-current={isActive ? "page" : undefined}              onClick={() => {                document.cookie = getCookie(locale);              }}            >              <span>{localeFlags[locale]}</span>              <span>{getLocaleLabel(locale)}</span>              <span>{locale.toUpperCase()}</span>            </Link>          );        })}      </div>    </nav>  );}

"use client";import Link from "next/link";import { usePathname } from "next/navigation";import { useLocale } from "next-intl";import { defaultLocale, getCookie, type Locale, locales } from "@/i18n";const getLocaleLabel = (locale: Locale): string => {  try {    const displayNames = new Intl.DisplayNames([locale], { type: "language" });    return displayNames.of(locale) ?? locale.toUpperCase();  } catch {    return locale.toUpperCase();  }};const localeFlags: Record<Locale, string> = {  en: "🇬🇧",  fr: "🇫🇷",  es: "🇪🇸",};export default function LocaleSwitcher() {  const activeLocale = useLocale();  const pathname = usePathname();  // パス名からロケールのプレフィックスを削除してベースパスを取得する  const getBasePath = (path: string) => {    for (const locale of locales) {      if (path.startsWith(`/${locale}`)) {        return path.slice(locale.length + 1) || "/";      }    }    return path;  };  const basePath = getBasePath(pathname);  return (    <nav aria-label="言語セレクター">      <div>        {(locales as readonly Locale[]).map((locale) => {          const isActive = locale === activeLocale;          // デフォルトロケールかどうかに基づいてhrefを構築          const href =            locale === defaultLocale ? basePath : `/${locale}${basePath}`;          return (            <Link              key={locale}              href={href}              aria-current={isActive ? "page" : undefined}              onClick={() => {                document.cookie = getCookie(locale);              }}            >              <span>{localeFlags[locale]}</span>              <span>{getLocaleLabel(locale)}</span>              <span>{locale.toUpperCase()}</span>            </Link>          );        })}      </div>    </nav>  );}

（オプション）ステップ9：ローカライズされたLinkコンポーネントを使用する

next-intlは、アクティブなロケールを自動的に適用するローカライズされたリンクコンポーネントを含むサブパッケージnext-intl/navigationを提供しています。これはすでに@/i18nファイルで抽出してあるので、以下のように使用できます。

src/components/MyComponent.tsx

コードをコピー

コードをクリップボードにコピー

import { Link } from "@/i18n";return <Link href="/about">t("about.title")</Link>;

（オプション）ステップ10：Server Actions内でアクティブなロケールにアクセスする

Server Actionsはnext-intl/serverを使用して現在のロケールを読み取ることができます。これはローカライズされたメールを送信したり、送信されたデータと共に言語設定を保存したりするのに便利です。

src/app/actions/get-current-locale.ts

コードをコピー

コードをクリップボードにコピー

"use server";import { getLocale } from "next-intl/server";export async function getCurrentLocale() {  return getLocale();}export async function handleContactForm(formData: FormData) {  const locale = await getCurrentLocale();  // ロケールを使用してテンプレートや分析ラベルなどを選択します。  console.log(`ロケール ${locale} からの問い合わせフォームを受信しました`);}

"use server";import { getLocale } from "next-intl/server";export async function getCurrentLocale() {  return getLocale();}export async function handleContactForm(formData: FormData) {  const locale = await getCurrentLocale();  // ロケールを使用してテンプレートや分析ラベルなどを選択します。  console.log(`ロケール ${locale} からの問い合わせフォームを受信しました`);}

getLocale は next-intl プロキシによって設定されたロケールを読み取るため、サーバーのどこでも動作します：ルートハンドラー、サーバーアクション、およびエッジ関数。

（オプション）ステップ11：メタデータの国際化

コンテンツの翻訳は重要ですが、国際化の主な目的はあなたのウェブサイトを世界により見えるようにすることです。I18nは適切なSEOを通じてウェブサイトの可視性を向上させるための強力な手段です。

適切に国際化されたメタデータは、検索エンジンがあなたのページで利用可能な言語を理解するのに役立ちます。これには、hreflangメタタグの設定、タイトルや説明の翻訳、そして各ロケールに対して正しいカノニカルURLが設定されていることの確認が含まれます。

src/app/[locale]/about/layout.tsx

コードをコピー

コードをクリップボードにコピー

import type { Metadata } from "next";import { locales, defaultLocale, localizedPath } from "@/i18n";import { getTranslations } from "next-intl/server";// generateMetadataは各ロケールごとに実行され、SEOに適したメタデータを生成しますtsx fileName="src/app/[locale]/about/layout.tsx"// これは検索エンジンが代替言語バージョンを理解するのに役立ちますexport async function generateMetadata({  params,}: {  params: { locale: string };}): Promise<Metadata> {  const { locale } = params;  const t = await getTranslations({ locale, namespace: "about" });  const url = "/about";  const languages = Object.fromEntries(    locales.map((locale) => [locale, localizedPath(locale, url)])  );  return {    title: t("title"),    description: t("description"),    alternates: {      canonical: localizedPath(locale, url),      languages: { ...languages, "x-default": url },    },  };}// ... ページの残りのコード

import type { Metadata } from "next";import { locales, defaultLocale, localizedPath } from "@/i18n";import { getTranslations } from "next-intl/server";// generateMetadataは各ロケールごとに実行され、SEOに適したメタデータを生成しますtsx fileName="src/app/[locale]/about/layout.tsx"// これは検索エンジンが代替言語バージョンを理解するのに役立ちますexport async function generateMetadata({  params,}: {  params: { locale: string };}): Promise<Metadata> {  const { locale } = params;  const t = await getTranslations({ locale, namespace: "about" });  const url = "/about";  const languages = Object.fromEntries(    locales.map((locale) => [locale, localizedPath(locale, url)])  );  return {    title: t("title"),    description: t("description"),    alternates: {      canonical: localizedPath(locale, url),      languages: { ...languages, "x-default": url },    },  };}// ... ページの残りのコード

（オプション）ステップ12：サイトマップの国際化

すべてのロケールバージョンのページを含むサイトマップを生成します。これにより、検索エンジンがすべての言語バージョンのコンテンツを検出し、インデックス化するのに役立ちます。

適切に国際化されたサイトマップは、検索エンジンがすべての言語バージョンのページを見つけてインデックス化できるようにします。これにより、国際的な検索結果での可視性が向上します。

src/app/sitemap.ts

コードをコピー

コードをクリップボードにコピー

import type { MetadataRoute } from "next";import { defaultLocale, locales } from "@/i18n";const origin = "https://example.com";const formatterLocalizedPath = (locale: string, path: string) =>  locale === defaultLocale ? `${origin}${path}` : `${origin}/${locale}${path}`;/** * すべてのロケールとそのローカライズされたパスのマップを取得する * * 出力例: * { *   "en": "https://example.com", *   "fr": "https://example.com/fr", *   "es": "https://example.com/es", *   "x-default": "https://example.com" * } */const getLocalizedMap = (path: string) =>  Object.fromEntries([    ...locales.map((locale) => [locale, formatterLocalizedPath(locale, path)]),    ["x-default", formatterLocalizedPath(defaultLocale, path)],  ]);// すべてのロケールバリアントを含むサイトマップを生成し、SEOを向上させる// alternatesフィールドは検索エンジンに言語バージョンを伝えるexport default function sitemap(): MetadataRoute.Sitemap {  return [    {      url: formatterLocalizedPath(defaultLocale, "/"),      lastModified: new Date(),      changeFrequency: "monthly",      priority: 1.0,      alternates: { languages: getLocalizedMap("/") },    },    {      url: formatterLocalizedPath(defaultLocale, "/about"),      lastModified: new Date(),      changeFrequency: "monthly",      priority: 0.7,      alternates: { languages: getLocalizedMap("/about") },    },  ];}

import type { MetadataRoute } from "next";import { defaultLocale, locales } from "@/i18n";const origin = "https://example.com";const formatterLocalizedPath = (locale: string, path: string) =>  locale === defaultLocale ? `${origin}${path}` : `${origin}/${locale}${path}`;/** * すべてのロケールとそのローカライズされたパスのマップを取得する * * 出力例: * { *   "en": "https://example.com", *   "fr": "https://example.com/fr", *   "es": "https://example.com/es", *   "x-default": "https://example.com" * } */const getLocalizedMap = (path: string) =>  Object.fromEntries([    ...locales.map((locale) => [locale, formatterLocalizedPath(locale, path)]),    ["x-default", formatterLocalizedPath(defaultLocale, path)],  ]);// すべてのロケールバリアントを含むサイトマップを生成し、SEOを向上させる// alternatesフィールドは検索エンジンに言語バージョンを伝えるexport default function sitemap(): MetadataRoute.Sitemap {  return [    {      url: formatterLocalizedPath(defaultLocale, "/"),      lastModified: new Date(),      changeFrequency: "monthly",      priority: 1.0,      alternates: { languages: getLocalizedMap("/") },    },    {      url: formatterLocalizedPath(defaultLocale, "/about"),      lastModified: new Date(),      changeFrequency: "monthly",      priority: 0.7,      alternates: { languages: getLocalizedMap("/about") },    },  ];}

（オプション）ステップ13: robots.txtの多言語対応

保護されたルートのすべてのロケールバージョンを適切に処理するrobots.txtファイルを作成します。これにより、検索エンジンが管理者ページやダッシュボードページをどの言語でもインデックスしないようにできます。

すべてのロケールに対してrobots.txtを適切に設定することで、ルートがロケールごとに異なる場合でも、検索エンジンが機密ページをインデックスするのを防ぎます。

src/app/robots.ts

コードをコピー

コードをクリップボードにコピー

import type { MetadataRoute } from "next";import { locales, defaultLocale } from "@/i18n";const origin = "https://example.com";// すべてのロケールのパスを生成（例: /admin, /fr/admin, /es/admin）const withAllLocales = (path: string) => [  path,  ...locales    .filter((locale) => locale !== defaultLocale)    .map((locale) => "/" + locale + path),];export default function robots(): MetadataRoute.Robots {  const disallow = [    ...withAllLocales("/dashboard"),    ...withAllLocales("/admin"),  ];  return {    rules: { userAgent: "*", allow: ["/"], disallow },    host: origin,    sitemap: origin + "/sitemap.xml",  };}

import type { MetadataRoute } from "next";import { locales, defaultLocale } from "@/i18n";const origin = "https://example.com";// すべてのロケールのパスを生成（例: /admin, /fr/admin, /es/admin）const withAllLocales = (path: string) => [  path,  ...locales    .filter((locale) => locale !== defaultLocale)    .map((locale) => "/" + locale + path),];export default function robots(): MetadataRoute.Robots {  const disallow = [    ...withAllLocales("/dashboard"),    ...withAllLocales("/admin"),  ];  return {    rules: { userAgent: "*", allow: ["/"], disallow },    host: origin,    sitemap: origin + "/sitemap.xml",  };}

（オプション）ステップ14：ロケールルーティングのためのプロキシ設定

ユーザーの優先ロケールを自動的に検出し、適切なロケールプレフィックス付きURLへリダイレクトするプロキシを作成します。next-intlはこれを自動で処理する便利なプロキシ関数を提供しています。

プロキシは、ユーザーがサイトを訪れた際に自動的に好みの言語にリダイレクトされることを保証します。また、ユーザーの言語設定を保存し、次回以降の訪問時にユーザーエクスペリエンスを向上させます。

src/proxy.ts

コードをコピー

コードをクリップボードにコピー

import { proxy } from "@/i18n";// ミドルウェアはルートの前に実行され、ロケール検出とルーティングを処理します// localeDetection: true は Accept-Language ヘッダーを使用してロケールを自動検出しますexport default proxy;export const config = {  // API、Nextの内部処理、静的アセットをスキップ  // 正規表現: api、_nextで始まるもの、またはドットを含むファイルを除くすべてのルートにマッチ  matcher: ["/((?!api|_next|.*\\..*).*)"],};

import { proxy } from "@/i18n";// ミドルウェアはルートの前に実行され、ロケール検出とルーティングを処理します// localeDetection: true は Accept-Language ヘッダーを使用してロケールを自動検出しますexport default proxy;export const config = {  // API、Nextの内部処理、静的アセットをスキップ  // 正規表現: api、_nextで始まるもの、またはドットを含むファイルを除くすべてのルートにマッチ  matcher: ["/((?!api|_next|.*\\..*).*)"],};

(オプション) ステップ15: ロケール用のTypeScript型を設定する

TypeScriptを設定すると、キーのオートコンプリートと型安全性が得られます。

そのために、プロジェクトのルートに global.ts ファイルを作成し、以下のコードを追加できます。

global.ts

コードをコピー

コードをクリップボードにコピー

import type { locales } from "@/i18n";type Messages = {  common: typeof import("./locales/en/common.json");  home: typeof import("./locales/en/home.json");  about: typeof import("./locales/en/about.json");  // ... 将来的に追加されるJSONファイルもここに追加してください};declare module "next-intl" {  interface AppConfig {    Locale: (typeof locales)[number];    Messages: Messages;  }}

import type { locales } from "@/i18n";type Messages = {  common: typeof import("./locales/en/common.json");  home: typeof import("./locales/en/home.json");  about: typeof import("./locales/en/about.json");  // ... 将来的に追加されるJSONファイルもここに追加してください};declare module "next-intl" {  interface AppConfig {    Locale: (typeof locales)[number];    Messages: Messages;  }}

このコードはモジュール拡張（Module Augmentation）を使用して、locales と messages を next-intl の AppConfig 型に追加します。

（オプション）ステップ15: Intlayerを使って翻訳を自動化する

Intlayerは、アプリケーションのローカリゼーションプロセスを支援するために設計された無料かつオープンソースのライブラリです。next-intlが翻訳の読み込みと管理を担当する一方で、Intlayerは翻訳ワークフローの自動化を支援します。

翻訳を手動で管理することは時間がかかり、エラーが発生しやすい作業です。Intlayerは翻訳のテスト、生成、管理を自動化し、時間を節約するとともに、アプリケーション全体での一貫性を確保します。

Intlayerは以下のことを可能にします：

コードベース内の好きな場所でコンテンツを宣言する Intlayerは.content.{ts|js|json}ファイルを使用して、コードベース内の好きな場所でコンテンツを宣言することを可能にします。これにより、コンテンツの整理が向上し、コードベースの可読性と保守性が高まります。
不足している翻訳のテスト Intlayerは、CI/CDパイプラインやユニットテストに統合できるテスト機能を提供します。詳細は翻訳のテストをご覧ください。
翻訳の自動化 Intlayerは、翻訳を自動化するためのCLIとVSCode拡張機能を提供します。これらはCI/CDパイプラインに統合可能です。詳細は翻訳の自動化をご覧ください。ご自身のAPIキーとお好みのAIプロバイダーを使用できます。また、コンテキストに応じた翻訳も提供します。詳細はコンテンツの自動補完をご覧ください。
外部コンテンツの接続 Intlayerは、外部のコンテンツ管理システム（CMS）にコンテンツを接続することを可能にします。最適化された方法でコンテンツを取得し、JSONリソースに挿入します。詳細は外部コンテンツの取得についてをご覧ください。
ビジュアルエディター
Intlayerは、ビジュアルエディターを使用してコンテンツを編集できる無料のビジュアルエディターを提供しています。詳細は翻訳のビジュアル編集についてをご覧ください。

その他にも多数の機能があります。Intlayerが提供するすべての機能を知るには、Intlayerの利点に関するドキュメントをご参照ください。

next-i18nextによるi18n

next-i18nextを自動化

バージョン履歴

2025年版 next-intl を使った Next.js アプリケーションの国際化方法

目次

next-intl とは？

守るべきプラクティス

Next.jsアプリケーションでnext-intlをセットアップするステップバイステップガイド

ステップ1: 依存関係のインストール

ステップ2: プロジェクトの設定

ステップ3: 動的ロケールルートの定義

ステップ4: 翻訳ファイルを作成する

ステップ5: ページで翻訳を利用する

ステップ6: クライアントコンポーネントでの翻訳の使用

ステップ7: サーバーコンポーネントでの翻訳の使用

（オプション）ステップ8: コンテンツの言語を変更する

（オプション）ステップ9：ローカライズされたLinkコンポーネントを使用する

（オプション）ステップ10：Server Actions内でアクティブなロケールにアクセスする

（オプション）ステップ11：メタデータの国際化

（オプション）ステップ12：サイトマップの国際化

（オプション）ステップ13: robots.txtの多言語対応

（オプション）ステップ14：ロケールルーティングのためのプロキシ設定

(オプション) ステップ15: ロケール用のTypeScript型を設定する

（オプション）ステップ15: Intlayerを使って翻訳を自動化する