# General Translation React SDKs (gt-react, gt-next): createNextMiddleware
URL: https://generaltranslation.com/ja/docs/react/nextjs/reference/functions/create-next-middleware.mdx
---

title: createNextMiddleware
description: General Translation を使って Next.js アプリにロケールルーティングと検出機能を追加します。createNextMiddleware の API リファレンス。

---

`gt-next/middleware` の `createNextMiddleware` 関数は、Next.js アプリにロケールベースのルーティングと検出機能を追加します。各訪問者のロケールを検出し、それを cookie に保存して、ページのローカライズ版にルーティングします。

ルーターごとのセットアップについては、[App Router ミドルウェアガイド](/docs/react/nextjs/app-router-middleware) または [Pages Router ミドルウェアガイド](/docs/react/nextjs/pages-router-middleware) を参照してください。

## 概要 [#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. **URL ロケール** — `/es/about` のように、パス名に含まれるロケールプレフィックス。
2. **Cookie** — 訪問者が以前選択したロケール。
3. **ブラウザヘッダー** — `Accept-Language` header。
4. **デフォルトロケール** — フォールバックとして使われる、設定済みの `defaultLocale`。

その後、ロケール cookie を設定し、`localeRouting` が有効な場合は、正しいローカライズ済みパスにリダイレクトまたはリライトします。デフォルトでは `defaultLocale` にプレフィックスは付かず (`/about` はそのまま `/about`) 、それ以外のロケールには付きます (`/es/about`) 。General Translation のサービスが有効な場合、ロケールコードは正規の形式に標準化され、サポートされていないロケールに対しては build-time 警告が表示されます。

## オプション [#options]

`createNextMiddleware` は 1 つのオプションオブジェクトを受け取ります。すべてのフィールドは省略可能です。

| Option                                          | Description                   | Type      | Optional | 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`  | はい       | `{}`    |

*注: ミドルウェアを実行するパス名を制限するには、`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は共有パスで、各値は単一のローカライズ済みパス、またはロケールごとのマップです。`[id]` のような動的セグメントはそのまま保持されます。

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

## 例 [#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 は、リダイレクトループの原因になったり、静的アセットを壊したりする可能性があります。*