ミドルウェア

ミドルウェアはユーザーの言語設定を自動で検出し、サイトの適切なローカライズ版へリダイレクトします。ブラウザ設定、ジオロケーション、ユーザーごとの設定を利用して、コンテンツが読み込まれる前に適切な言語を配信します。

ファイル配置: proxy.ts をプロジェクトのルート（app/ ディレクトリと同じ階層）に配置してください（app/ ディレクトリの中ではありません）。proxy.ts (Next.js 16+) または middleware.ts (Next.js 15 以前) を使用します。

セットアップ

ステップ 1: 動的ルートを作成

app/ フォルダー内に [locale] ディレクトリを作成し、その配下のすべてのページをその中に移動します:

proxy.ts

layout.tsx

page.tsx

next.config.js

ステップ 2：Middleware を追加する

プロジェクトのルートディレクトリに proxy.ts を作成します。

import { createNextMiddleware } from 'gt-next/middleware';

export default createNextMiddleware();

export const config = {
  // APIルート、静的ファイル、Next.js内部を除くすべてのパスにマッチ
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

これにより、/en/about や /es/about のように locale プレフィックスを含む URL に対して、自動的な言語検出と URL ルーティングを行えるようになります。

言語検出

このミドルウェアは、ユーザーの言語設定を次の優先順で検出します：

URL の locale - /es/about → スペイン語
ユーザーの Cookie - 以前に選択した言語
ブラウザーヘッダー - Accept-Language ヘッダー
デフォルトの locale - 設定されたフォールバック言語

このミドルウェアは、追加の設定なしでブラウザー言語の検出と Cookie の永続化を自動的に処理します。

ローカライズ済みのパス

言語ごとに URL パスをカスタマイズします:

export default createNextMiddleware({
  pathConfig: {
    // 英語：/en/products、中国語：/zh/产品
    "/products": {
      "zh": "/产品"
    },
    
    // 動的ルート：/en/product/123、/zh/产品/123
    "/product/[id]": {
      "zh": "/产品/[id]"
    }
  }
});

URL 構造

既定では、既定の locale にロケールコードのプレフィックスは付きません。

/about     → /about        （既定のlocale：英語）
/about     → /es/about     （スペイン語）
/about     → /fr/about     （フランス語）

デフォルトのlocaleにプレフィックスを追加する

デフォルトを含むすべてのlocaleにプレフィックスを付けるには:

export default createNextMiddleware({
  prefixDefaultLocale: true
});

結果:

/about     → /en/about     (英語、プレフィックス付き)
/about     → /es/about     (スペイン語、プレフィックス付き)
/about     → /fr/about     (フランス語、プレフィックス付き)

よくある問題

動的ルートが見つかりません

すべてのページは [locale]/ 配下に配置する必要があります:

❌ 誤り:
app/
├── page.tsx
└── about/page.tsx

✅ 正解:
app/
└── [locale]/
    ├── page.tsx
    └── about/page.tsx

マッチャーの設定

API ルートと静的ファイルを除外:

export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

ミドルウェアの設定は入念にテストしましょう。誤った matcher があると、無限リダイレクトが発生したり、静的アセットが壊れることがあります。

次のステップ

SSGガイド - localeルーティング対応の静的生成
RTLサポート - 右から左に表記する言語
APIリファレンス:

セットアップ

ステップ 1: 動的ルートを作成

app/ フォルダー内に [locale] ディレクトリを作成し、その配下のすべてのページをその中に移動します:

proxy.ts

layout.tsx

page.tsx

next.config.js

ステップ 2：Middleware を追加する

プロジェクトのルートディレクトリに proxy.ts を作成します。

import { createNextMiddleware } from 'gt-next/middleware';

export default createNextMiddleware();

export const config = {
  // APIルート、静的ファイル、Next.js内部を除くすべてのパスにマッチ
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

言語検出

このミドルウェアは、ユーザーの言語設定を次の優先順で検出します：

URL の locale - /es/about → スペイン語
ユーザーの Cookie - 以前に選択した言語
ブラウザーヘッダー - Accept-Language ヘッダー
デフォルトの locale - 設定されたフォールバック言語

このミドルウェアは、追加の設定なしでブラウザー言語の検出と Cookie の永続化を自動的に処理します。

ローカライズ済みのパス

言語ごとに URL パスをカスタマイズします:

export default createNextMiddleware({
  pathConfig: {
    // 英語：/en/products、中国語：/zh/产品
    "/products": {
      "zh": "/产品"
    },
    
    // 動的ルート：/en/product/123、/zh/产品/123
    "/product/[id]": {
      "zh": "/产品/[id]"
    }
  }
});

URL 構造

既定では、既定の locale にロケールコードのプレフィックスは付きません。

/about     → /about        （既定のlocale：英語）
/about     → /es/about     （スペイン語）
/about     → /fr/about     （フランス語）

デフォルトのlocaleにプレフィックスを追加する

デフォルトを含むすべてのlocaleにプレフィックスを付けるには:

export default createNextMiddleware({
  prefixDefaultLocale: true
});

結果:

/about     → /en/about     (英語、プレフィックス付き)
/about     → /es/about     (スペイン語、プレフィックス付き)
/about     → /fr/about     (フランス語、プレフィックス付き)

よくある問題

動的ルートが見つかりません

すべてのページは [locale]/ 配下に配置する必要があります:

❌ 誤り:
app/
├── page.tsx
└── about/page.tsx

✅ 正解:
app/
└── [locale]/
    ├── page.tsx
    └── about/page.tsx

マッチャーの設定

API ルートと静的ファイルを除外:

export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

ミドルウェアの設定は入念にテストしましょう。誤った matcher があると、無限リダイレクトが発生したり、静的アセットが壊れることがあります。

次のステップ

SSGガイド - localeルーティング対応の静的生成
RTLサポート - 右から左に表記する言語
APIリファレンス:

セットアップ

ステップ 1: 動的ルートを作成

app/ フォルダー内に [locale] ディレクトリを作成し、その配下のすべてのページをその中に移動します:

proxy.ts

layout.tsx

page.tsx

next.config.js

ステップ 2：Middleware を追加する

プロジェクトのルートディレクトリに proxy.ts を作成します。

import { createNextMiddleware } from 'gt-next/middleware';

export default createNextMiddleware();

export const config = {
  // APIルート、静的ファイル、Next.js内部を除くすべてのパスにマッチ
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

言語検出

このミドルウェアは、ユーザーの言語設定を次の優先順で検出します：

URL の locale - /es/about → スペイン語
ユーザーの Cookie - 以前に選択した言語
ブラウザーヘッダー - Accept-Language ヘッダー
デフォルトの locale - 設定されたフォールバック言語

このミドルウェアは、追加の設定なしでブラウザー言語の検出と Cookie の永続化を自動的に処理します。

ローカライズ済みのパス

言語ごとに URL パスをカスタマイズします:

export default createNextMiddleware({
  pathConfig: {
    // 英語：/en/products、中国語：/zh/产品
    "/products": {
      "zh": "/产品"
    },
    
    // 動的ルート：/en/product/123、/zh/产品/123
    "/product/[id]": {
      "zh": "/产品/[id]"
    }
  }
});

URL 構造

既定では、既定の locale にロケールコードのプレフィックスは付きません。

/about     → /about        （既定のlocale：英語）
/about     → /es/about     （スペイン語）
/about     → /fr/about     （フランス語）

デフォルトのlocaleにプレフィックスを追加する

デフォルトを含むすべてのlocaleにプレフィックスを付けるには:

export default createNextMiddleware({
  prefixDefaultLocale: true
});

結果:

/about     → /en/about     (英語、プレフィックス付き)
/about     → /es/about     (スペイン語、プレフィックス付き)
/about     → /fr/about     (フランス語、プレフィックス付き)

よくある問題

動的ルートが見つかりません

すべてのページは [locale]/ 配下に配置する必要があります:

❌ 誤り:
app/
├── page.tsx
└── about/page.tsx

✅ 正解:
app/
└── [locale]/
    ├── page.tsx
    └── about/page.tsx

マッチャーの設定

API ルートと静的ファイルを除外:

export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

ミドルウェアの設定は入念にテストしましょう。誤った matcher があると、無限リダイレクトが発生したり、静的アセットが壊れることがあります。

次のステップ

SSGガイド - localeルーティング対応の静的生成
RTLサポート - 右から左に表記する言語
APIリファレンス:

ミドルウェア

このページについて

ミドルウェア

このページについて

ミドルウェア

このページについて

GitHubGitHubでスターを付ける

GitHubGitHubでスターを付ける

GitHubでスターを付ける

GitHubでスターを付ける