# General Translation React SDKs (gt-react, gt-next, gt-react-native): createNextMiddleware
URL: https://generaltranslation.com/ja/docs/react/nextjs/reference/functions/create-next-middleware.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: General Translation を使って Next.js アプリにロケールルーティングと検出機能を追加します。createNextMiddleware の API リファレンス。
`gt-next/middleware` の `createNextMiddleware` 関数は、各訪問者のロケールを検出し、それを cookie に保存して、ページのローカライズ版にルーティングします。
現在のセットアップについては、[App Router ミドルウェアガイド](/docs/react/nextjs/app-router-middleware) を参照してください。Pages Router アプリでは、代わりに [Next.js internationalized routing](/docs/react/nextjs/pages-router-middleware) を使用します。
*リクエスト時のロケール検出やロケールプレフィックス付き URL が不要な場合、ミドルウェアは任意です。ミドルウェアがない場合、ロケールセレクターは URL にプレフィックスを付けず、選択されたロケールを cookie に保存して、App Router のコンテンツを更新します。*
## 概要 [#overview]
ミドルウェアを作成し、パスマッチャーと一緒にミドルウェアファイルからエクスポートします。配置場所はプロジェクトルートです。Next.js 16 以降では `proxy.ts`、Next.js 15 以下では `middleware.ts` に置き、`app/` や `pages/` の中には配置しないでください。
```ts title="proxy.ts"
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware();
export const config = {
// APIルート、静的ファイル、Next.js内部を除くすべてのパスにマッチ
matcher: ['/((?!api|static|.*\\..*|_next).*)'],
};
```
## 仕組み [#how-it-works]
ミドルウェアは、各リクエストのロケールを次の順で判定します。
1. **ロケール cookie のリセット** — ロケールルーティングのリセットが保留中の場合に、ブラウザで選択されたばかりのロケール。
2. **URL ロケール** — `/es/about` のようなサポート対象のロケールプレフィックス、または設定済みのプレフィックスなしのデフォルトロケールパス。
3. **ロケール cookie** — リセットが保留中でない場合に、訪問者が以前選択したロケール。
4. **リファラーのロケール cookie** — リセットが保留中でない場合に、前のクライアントルートのロケール。
5. **ブラウザヘッダー** — [`ignoreBrowserLocales`](/docs/react/nextjs/config#ignore-browser-locales) が有効でない限り、`Accept-Language` header。
6. **デフォルトロケール** — フォールバックとして使われる、設定済みの `defaultLocale`。
その後、ロケール cookie を設定し、`localeRouting` が有効な場合は、正しいローカライズされたパスにリダイレクトまたは書き換えます。デフォルトでは `defaultLocale` にプレフィックスは付かず (`/about` はそのまま `/about`) 、それ以外のロケールには付きます (`/es/about`) 。General Translation のサービスが有効な場合、ロケールコードは正規の形式に標準化され、サポートされていない設定済みのロケールに対しては build-time 警告が表示されます。
## オプション [#options]
`createNextMiddleware` は 1 つのオプションオブジェクトを受け取ります。すべてのフィールドは任意です。
| Option | Description | Type | 任意 | Default |
| ----------------------------------------------- | --------------------------------- | ---------------- | -------- | ------- |
| [`localeRouting`](#locale-routing) | ロケールベースのルーティングを有効にします。 | `boolean` | はい | `true` |
| [`prefixDefaultLocale`](#prefix-default-locale) | URL にもデフォルトロケールのプレフィックスを付けます。 | `boolean` | はい | `false` |
| [`ignoreSourceMaps`](#ignore-source-maps) | Next.js のソースマップリクエストをスキップします。 | `boolean` | はい | `true` |
| [`pathConfig`](#path-config) | ローカライズされたパスのエイリアス。 | `object` | はい | `{}` |
| [`routeOverrides`](#route-overrides) | 公開 URL を変更せずに、ロケール固有のページ実装を使用します。 | `RouteOverrides` | はい | `{}` |
*注: ミドルウェアを実行するパス名を制限するには、`withGTConfig` で [`pathRegex`](/docs/react/nextjs/config#path-regex) を設定してください。これはミドルウェアのオプションではありません。エクスポートした `config` の `matcher` は、ミドルウェアをそもそも実行するかどうかを Next.js が判断するために使われます。*
### `localeRouting` [#locale-routing]
**Type** `boolean` · **任意** · **デフォルト** `true`
ロケールベースのルーティングとリダイレクトを有効にします。`false` の場合でも、ミドルウェアは引き続きロケールを検出して保存しますが、ロケール プレフィックスの追加やパスの書き換えは行いません。
### `prefixDefaultLocale` [#prefix-default-locale]
**型** `boolean` · **任意** · **デフォルト** `false`
`false` の場合 (デフォルト) 、デフォルトロケールはプレフィックスなし (`/about`) で提供され、他のロケールにはプレフィックスが付きます (`/es/about`) 。`true` の場合は、デフォルト (`/en/about`) を含むすべてのロケールにプレフィックスが付きます。
### `ignoreSourceMaps` [#ignore-source-maps]
**型** `boolean` · **省略可能** · **デフォルト** `true`
`true` の場合、Next.js のソースマップへのリクエストは変更されずにそのまま通過します。
### `pathConfig` [#path-config]
**型** `object` · **任意** · **デフォルト** `{}`
共有パスをローカライズされたパスに対応付けることで、ルートごとにロケール別の異なるURLを設定できます。各keyは共有パスで、各値は単一のローカライズされたパス、またはロケールごとのマップです。
```ts title="proxy.ts"
export default createNextMiddleware({
pathConfig: {
// 英語: /products、フランス語: /fr/produits
'/products': {
fr: '/produits',
},
// 動的: /product/123、/fr/produit/123
'/product/[id]': {
fr: '/produit/[id]',
},
// 必須のキャッチオール: /blog/2026/launch、/fr/articles/2026/launch
'/blog/[...slug]': {
fr: '/articles/[...slug]',
},
// 任意のキャッチオール: /news または /news/latest、/fr/actualites または /fr/actualites/latest
'/news/[[...slug]]': {
fr: '/actualites/[[...slug]]',
},
},
});
```
### `routeOverrides` [#route-overrides]
**Type** `RouteOverrides` · **任意** · **Default** `{}`
ロケール固有のページ実装を持つ共有ルートパターンに、ロケールを対応付けます。公開 URL は引き続き共有ルートまたはその [`pathConfig`](#path-config) エイリアスを使用し、ミドルウェアがリクエストを 2 つ目の静的なロケールセグメントを持つルートへ書き換えます。
たとえば、次のファイル構成では、フランス語の訪問者に対して静的ページ、動的な商品ページ、およびブログページ群のカスタム実装を提供します。
各オーバーライドは、対応する共有ルートパターンとともに設定します。
```ts title="proxy.ts"
export default createNextMiddleware({
routeOverrides: {
fr: [
'/home', // 静的ルート
'/product/[id]', // 動的パラメータ
'/blog/[[...slug]]', // ルートおよび配下のすべてのパス
],
},
});
```
* `/home` はフランス語では `app/[locale]/fr/home/page.tsx` を、その他のロケールでは共有の `app/[locale]/home/page.tsx` を使用します。
* `/product/[id]` は動的な `id` を保持したまま、フランス語のみに商品ページを追加します。
* `/blog/[[...slug]]` はフランス語のみにブログ一式 (`/blog`、`/blog/authors`、`/blog/posts`、`/blog/posts/[...slug]`) を追加します。
`localeRouting` が `false` の場合、overrides は無視されます。General Translation のサービスが有効な場合、ロケールキーは標準化されます。
キャッシュおよびレイアウトの API が参照するのは内部ルートです。Next.js の `revalidatePath` には、`/fr/fr/home` のような書き換え先を渡してください。`[locale]` レイアウトからは、`useSelectedLayoutSegments` に override の static なロケールセグメントも含まれます。
内部ナビゲーションには `gt-next/link` の [``](/docs/react/nextjs/link) を使用してください。こうすることで、余分なミドルウェアのリダイレクトを介さずに、遷移前にロケールプレフィックス付きのルートが生成されます。
## 例 [#example]
```ts title="proxy.ts"
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware({
prefixDefaultLocale: true,
pathConfig: {
'/about': {
fr: '/a-propos',
},
},
});
export const config = {
matcher: ['/((?!api|static|.*\\..*|_next).*)'],
};
```
*警告: matcher は慎重にテストしてください。広くマッチしすぎる matcher は、リダイレクトループの原因になったり、静的アセットを壊したりする可能性があります。*
## Sitemap
See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.