# General Translation React SDKs (gt-react, gt-next): App Router ミドルウェア
URL: https://generaltranslation.com/ja/docs/react/nextjs/app-router-middleware.mdx
---
title: App Router ミドルウェア
description: Next.js App Router 向けに General Translation のロケールルーティングを設定する方法。
related:
  links:
    - /docs/react/nextjs-quickstart
    - /docs/react/nextjs/app-router-static-site-generation
    - /docs/react/nextjs/reference/functions/create-next-middleware

---

ミドルウェア、`[locale]` のルートセグメント、リクエストロケール関数を設定し、App Router のリクエストが適切なローカライズルートに解決されるようにします。

## ミドルウェアを設定する [#middleware]

プロジェクトのルートに `proxy.ts` を作成します (Next.js 15 以前では `middleware.ts`) :

```ts title="proxy.ts"
import { createNextMiddleware } from 'gt-next/middleware';

export default createNextMiddleware();

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

ミドルウェアは、URL、クッキー、ブラウザのヘッダー、またはデフォルトロケールからロケールを検出します。次に、対応するローカライズされたルートにリクエストをリダイレクトまたはリライトします。

## ロケールルートを追加する [#locale-route]

App Router のページを `app/[locale]` 配下に移動します。

<Files>
  <Folder name="app">
    <Folder name="[locale]">
      <File name="layout.tsx" />

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

  <File name="getLocale.ts" />

  <File name="proxy.ts" />
</Files>

このルートセグメントは、ミドルウェアで選択されたロケールを受け取ります。ルーティングオプションとローカライズされたパスの設定については、[`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) を参照してください。

## ルートロケールを取得する [#root-locale]

プロジェクトのルートに `getLocale.ts` を作成します。`withGTConfig` はこのファイルを自動的に検出します。

```ts title="./getLocale.ts"
import { locale } from 'next/root-params';

export default async function getLocale() {
  return await locale();
}
```

root parameter により、リクエストヘッダーやクッキーを読み取らずにロケールを取得できます。
## Next steps

- /docs/react/nextjs-quickstart
- /docs/react/nextjs/app-router-static-site-generation
- /docs/react/nextjs/reference/functions/create-next-middleware