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

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

---

使用 `generateStaticParams` 为每个区域设置预渲染一个 App Router 路由。区域设置路由和请求区域设置解析的 setup 与动态路由相同。

## 保持你的 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]

按照 [App Router middleware 指南](/docs/react/nextjs/app-router-middleware) 创建 `proxy.ts`，将路由移至 `app/[locale]` 下，并定义自定义 `getLocale` 函数。

## 禁用地区检测 [#region]

默认的地区解析器会读取 cookie，这会导致路由变为动态路由。要在预渲染期间禁用地区检测，请在项目根目录添加 `getRegion.ts`：

```ts title="./getRegion.ts"
export default async function getRegion() {
  return undefined;
}
```

`withGTConfig` 会自动识别该文件。

## 生成区域设置路由 [#generate-routes]

为每个已配置的区域设置返回一个路由参数：

```tsx title="app/[locale]/page.tsx"
import { getLocales, T } from 'gt-next';

export function generateStaticParams() {
  return getLocales().map((locale) => ({ locale }));
}

export default function HomePage() {
  return <T>Welcome to our site</T>;
}
```

现在，Next.js 会为每个区域设置分别预渲染一次 `app/[locale]/page.tsx`。
## Next steps

- /docs/react/nextjs-quickstart
- /docs/react/nextjs/app-router-middleware
- /docs/react/nextjs/config