# General Translation React SDKs (gt-react, gt-next): App Router 中间件
URL: https://generaltranslation.com/zh/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、Cookie、浏览器请求头或默认区域设置中检测区域设置，然后将请求重定向或改写为对应的本地化路由。

## 添加区域设置路由 [#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();
}
```

根参数可在不读取请求头或 cookie 的情况下提供区域设置。
## Next steps

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