# General Translation React SDKs (gt-react, gt-next): Pages Router 静态站点生成
URL: https://generaltranslation.com/zh/docs/react/nextjs/pages-router-static-site-generation.mdx
---

title: Pages Router 静态站点生成
description: 如何使用 General Translation 预渲染本地化的 Next.js Pages Router 页面。
related:
  links:
    - /docs/react/nextjs-pages-router-quickstart
    - /docs/react/nextjs/pages-router-middleware
    - /docs/react/guides/storing-translations

---

使用 `withGTStaticProps` 预渲染本地化的 Pages Router 页面。设置方式与 `withGTServerSideProps` 类似，但 Next.js 会在构建时生成这些属性。

## 保持你的 Next.js 配置不变 [#config]

静态生成不会改变你的 `withGTConfig` 设置：

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { withGTConfig } from 'gt-next/config';

const nextConfig: NextConfig = {};

export default withGTConfig(nextConfig);
```

## 配置区域设置路由 [#routing]

按照 [Pages Router 中间件指南](/docs/react/nextjs/pages-router-middleware) 创建 `proxy.ts`，并将路由移至 `pages/[locale]` 目录下。

## 添加静态属性 [#static-props]

使用 `withGTStaticProps` 包装每个页面的 `getStaticProps` 函数：

```tsx title="pages/[locale]/about.tsx"
import type { GetStaticProps } from 'next';
import { T, Var, withGTStaticProps } from 'gt-next';

type AboutPageProps = {
  generatedAt: string;
};

export const getStaticProps: GetStaticProps<AboutPageProps> =
  withGTStaticProps(async () => ({
    props: {
      generatedAt: new Date().toISOString(),
    },
  }));

export default function AboutPage({ generatedAt }: AboutPageProps) {
  return <T>Generated at: <Var>{generatedAt}</Var></T>;
}
```

`withGTStaticProps` 会将区域设置和翻译快照添加到返回的页面属性中。如果页面没有其他属性，请使用不带参数的形式：

```tsx title="pages/[locale]/index.tsx"
import { withGTStaticProps } from 'gt-next';

export const getStaticProps = withGTStaticProps();
```

将这些值传给 `GTProvider`，并在 `_app.tsx` 中[接入区域设置变更](/docs/react/nextjs/pages-router-middleware#locale-changes)。
## Next steps

- /docs/react/nextjs-pages-router-quickstart
- /docs/react/nextjs/pages-router-middleware
- /docs/react/guides/storing-translations