言語検出ミドルウェア
ユーザーの設定に基づく自動言語検出とURLルーティング
ミドルウェアはユーザーの言語の好みに基づいて自動的に検出を行い、該当するローカライズ版のサイトへリダイレクトします。コンテンツが読み込まれる前に、ブラウザの設定、位置情報、ユーザープリファレンスを参照して最適な言語を提供します。
ファイルの場所: middleware.ts はプロジェクトのルートに、app/ ディレクトリと同じ階層に配置してください。app/ の中には置かないでください。
セットアップ
ステップ 1: 動的ルートを作成
app/ フォルダ内に [locale] ディレクトリを作成し、すべてのページをその中へ移動します:
middleware.ts
layout.tsx
page.tsx
next.config.js
ステップ 2: ミドルウェアを追加する
プロジェクトのルートに middleware.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 の 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 (デフォルトロケール: 英語)
/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.tsxMatcher の設定
API ルートおよび静的ファイルを除外:
export const config = {
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};ミドルウェアの設定は十分に検証しましょう。誤った matcher により、無限リダイレクトが発生したり、静的アセットが読み込めなくなる場合があります。
次のステップ
このガイドはどうでしたか？