# General Translation React SDKs (gt-react, gt-next): Pages Router middleware
URL: https://generaltranslation.com/zh/docs/react/nextjs/pages-router-middleware.mdx
---

title: Pages Router middleware
description: 如何为 Next.js Pages Router 配置 General Translation 的区域设置路由。
related:
  links:
    - /docs/react/nextjs-pages-router-quickstart
    - /docs/react/nextjs/pages-router-static-site-generation
    - /docs/react/nextjs/reference/functions/create-next-middleware

---

配置中间件和 `[locale]` 根路径段，让 Pages 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、浏览器 header 或默认区域设置来检测区域设置，然后将请求重定向或重写到匹配的本地化路由。

## 添加区域设置路由 [#locale-route]

将你的 Pages Router 页面移到 `pages/[locale]` 下，并将 `_app.tsx` 保留在 `pages` 根目录中：

<Files>
  <Folder name="pages">
    <File name="_app.tsx" />

    <Folder name="[locale]">
      <File name="index.tsx" />

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

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

该路由段会接收由中间件选定的区域设置。有关路由选项和本地化路径配置，请参阅 [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware)。

## 关联区域设置变更 [#locale-changes]

在 [`GTProvider`](/docs/react/reference/components/gt-provider) 上重写 `_reload`，让区域设置切换通过 Pages Router 导航进行，并加载所选区域设置的页面属性：

```tsx title="pages/_app.tsx"
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { GTProvider, type WithGTStaticProps } from 'gt-next';

export default function App({
  Component,
  pageProps,
}: AppProps<WithGTStaticProps>) {
  const router = useRouter();
  const { locale, translations, ...restPageProps } = pageProps;

  return (
    <GTProvider
      locale={locale}
      translations={translations}
      _reload={({ locale: nextLocale }) => {
        void router.push(
          { pathname: router.pathname, query: router.query },
          router.asPath,
          { locale: nextLocale }
        );
      }}
    >
      <Component {...restPageProps} />
    </GTProvider>
  );
}
```

对于服务器端渲染页面，请改用 `WithGTServerSideProps`。该回调会用 Pages Router 导航替代 provider 默认的整页刷新。
## Next steps

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