# General Translation React SDKs (gt-react, gt-next, gt-react-native): Pages Router の静的サイト生成
URL: https://generaltranslation.com/ja/docs/react/nextjs/pages-router-static-site-generation.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: General Translation を使用して、ローカライズされた Next.js Pages Router ページを事前レンダリングする方法。

`withGTStaticProps` を使用して、ローカライズされた Pages Router ページを事前レンダリングします。設定は `withGTServerSideProps` とほぼ同じですが、props は Next.js がビルド時に生成します。

## ロケールルーティングを設定する [#config]

Next.js では、ロケールごとに各ページのバージョンを生成するため、ビルド時にすべてのロケールを認識している必要があります。`gt.config.json` から値をインポートします。`locales` 配列には `defaultLocale` を含める必要があります。

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

const nextConfig: NextConfig = {
  i18n: {
    locales: gtConfig.locales,
    defaultLocale: gtConfig.defaultLocale,
  },
};

export default withGTConfig(nextConfig);
```

ページは通常の場所に配置したままにします。Next.js の国際化ルーティングでは、`pages/[locale]` セグメントを使用せずにローカライズされた URL が生成されます。完全な設定については、[Pages Router のロケールルーティング](/docs/react/nextjs/pages-router-middleware)を参照してください。

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

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

```tsx title="pages/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/index.tsx"
import { withGTStaticProps } from 'gt-next';

export const getStaticProps = withGTStaticProps();
```

Next.js は設定されたロケールごとに`getStaticProps`を1回呼び出し、`context.locale`を渡します。生成された値を[`GTProvider`](/docs/react/reference/components/gt-provider)に渡し、`_app.tsx`で[ロケールの変更に対応](/docs/react/nextjs/pages-router-middleware#locale-changes)します。

## 動的な結果の処理 [#dynamic-results]

ラッパーは、`getStaticProps` 関数の `redirect` と `notFound` の結果をそのまま保持します。結果に `props` が含まれている場合にのみ翻訳を読み込みます。

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

export const getStaticProps = withGTStaticProps(async ({ params }) => {
  const product = await loadProduct(params?.id);

  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product },
    revalidate: 3600,
  };
});
```

動的な Pages Router のルートでも `getStaticPaths` が必要です。事前レンダリングするロケールごとに、各パスを1回ずつ返します。

```tsx title="pages/products/[id].tsx"
import type { GetStaticPaths } from 'next';

export const getStaticPaths: GetStaticPaths = async ({ locales = [] }) => {
  const products = await loadProducts();

  return {
    paths: products.flatMap((product) =>
      locales.map((locale) => ({
        params: { id: product.id },
        locale,
      }))
    ),
    fallback: 'blocking',
  };
};
```

path で `locale` を省略すると、Next.js はその path のデフォルトロケール版のみを生成します。

## ビルド失敗からの復旧 [#build-failures]

### ロケールを特定できない

Next.js から `context.locale` と `context.defaultLocale` のいずれも提供されない場合、`withGTStaticProps` は例外をスローします。`next.config.ts` に `i18n.locales` と `i18n.defaultLocale` を追加し、`gt.config.json` と整合させてください。

Pages Router の `i18n` 設定の代わりに [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) を使用しないでください。ミドルウェアは、`getStaticProps` に渡されるビルド時のロケールを提供しません。

### デフォルトロケールでは翻訳されていないコンテンツがレンダリングされる

デフォルトロケールには、ソースコンテンツがすでにページに含まれているため、意図的に空の翻訳スナップショットが渡されます。他のロケールでは、生成された翻訳スナップショットが読み込まれます。

対象ロケールでもソースコンテンツがレンダリングされる場合は、`next build` の前に [`npx gt translate`](/docs/cli/reference/commands/translate) が実行されていること、およびそのロケールが Next.js と General Translation の両方の設定に含まれていることを確認してください。

### App Router ファイルで helper が例外をスローする

`withGTStaticProps` は Pages Router の API です。`app/` 配下では、`generateStaticParams` と [App Router の静的生成の設定](/docs/react/nextjs/app-router-static-site-generation) を使用してください。

### 静的エクスポートではロケールルーティングを使用できません

Next.js Pages Router の `i18n` 設定では、`output: 'export'` はサポートされていません。生成されたページは Next.js サーバーまたはプラットフォームアダプター経由でデプロイするか、明示的な `[locale]` パラメータを生成する App Router のルートに移行してください。

## Next steps

- /docs/react/nextjs/pages-router-middleware
- /docs/react/guides/storing-translations
- /docs/react/guides/managing-locales
- /docs/react/guides/migrating-i18n-libraries

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.