# General Translation React SDKs (gt-react, gt-next): Pages Router の静的サイト生成
URL: https://generaltranslation.com/ja/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` とほぼ同じですが、props は 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]` の下に移動します。

## 静的 props を追加 [#static-props]

各ページの`getStaticProps`関数を`withGTStaticProps`でラップします：

```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` は、返されるページの props にロケールと翻訳スナップショットを追加します。ページに他の props がない場合は、引数なしの形式を使用します。

```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