言語検出ミドルウェア
ユーザーの嗜好に基づく自動言語検出とURLルーティング
ミドルウェアはユーザーの言語嗜好を自動検出し、サイトの適切なローカライズ版へリダイレクトします。コンテンツが読み込まれる前に、ブラウザー設定、位置情報、ユーザー設定を用いて最適な言語を配信します。
ファイルの場所: middleware.ts はプロジェクトのルート直下、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 （既定の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 があると、無限リダイレクトが発生したり、静的アセットが壊れることがあります。
次のステップ
このガイドはいかがですか?