# gt-next: General Translation Next.js SDK: ミドルウェア
URL: https://generaltranslation.com/ja/docs/next/guides/middleware.mdx
---
title: ミドルウェア
description: ユーザー設定に基づいて言語を自動検出し、URL をルーティングします
---

ミドルウェアは、ユーザーの言語設定を自動的に検出し、サイトの適切なローカライズ版へリダイレクトします。
ブラウザ設定、位置情報、ユーザー設定に基づいて、コンテンツが読み込まれる前に適切な言語を提供します。

<Callout>
  **ファイルの場所:** `proxy.ts` はプロジェクトのルートにある `app/` ディレクトリと同じ階層に配置してください。`app/` の中には配置しないでください。`proxy.ts` (Next.js 16+) または `middleware.ts` (Next.js 15 以下)
</Callout>

## セットアップ

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

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

<Files>
  <Folder name="my-app" defaultOpen={true}>
    <File name="proxy.ts" />

    <Folder name="app" defaultOpen={true}>
      <Folder name="[locale]" defaultOpen={true}>
        <File name="layout.tsx" />

        <File name="page.tsx" />

        <Folder name="about">
          <File name="page.tsx" />
        </Folder>
      </Folder>

      <Folder name="api">
        <File name="route.ts" />
      </Folder>
    </Folder>

    <File name="next.config.js" />
  </Folder>
</Files>

### ステップ 2: ミドルウェアを追加する

プロジェクトのルートに `proxy.ts` を作成します:

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

export default createNextMiddleware();

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

これにより、自動的に言語を検出し、`/en/about` や `/es/about` のようなロケールプレフィックス付きURLルーティングを有効にできます。


## 言語検出

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

1. **URL ロケール** - `/es/about` → スペイン語
2. **ユーザー Cookie** - 前回選択した言語
3. **ブラウザヘッダー** - `Accept-Language` ヘッダー
4. **デフォルトロケール** - 設定されたフォールバック言語

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

## ローカライズされたパス

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

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


## URL 構造

デフォルトでは、デフォルトロケールにはロケールコードのプレフィックスは**付きません**。

```
/about     → /about        (default locale: English)
/about     → /es/about     (Spanish)
/about     → /fr/about     (French)
```


### デフォルトロケールにもプレフィックスを付ける

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

```ts
export default createNextMiddleware({
  prefixDefaultLocale: true
});
```

結果:

```
/about     → /en/about     (English, with prefix)
/about     → /es/about     (Spanish, with prefix)
/about     → /fr/about     (French, with prefix)
```


## よくある問題

### 動的ルートがありません

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

```
❌ Wrong:
app/
├── page.tsx
└── about/page.tsx

✅ Correct:
app/
└── [locale]/
    ├── page.tsx
    └── about/page.tsx
```


### マッチャーの設定

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

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

<Callout>
  ミドルウェアの設定は必ず十分にテストしてください。matcher が正しくないと、無限リダイレクトが発生したり、静的アセットが正常に配信されなくなったりする可能性があります。
</Callout>


## 次のステップ

<Callout>
  **実際の動作を見る:** [Static Site Generation のサンプルアプリ](https://github.com/gt-examples/static-site-generation)には、ロケールルーティングを含む ミドルウェア の完全なセットアップが含まれています — [ライブプレビュー](https://static-site-generation.generaltranslation.dev)。
</Callout>

* [SSG Guide](/docs/next/guides/ssg) - ロケールルーティングによる静的生成
* [RTL Support](/docs/next/guides/rtl) - 右から左に記述する言語
* API リファレンス: