# General Translation React SDKs (gt-react, gt-next): App Router の静的サイト生成
URL: https://generaltranslation.com/ja/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 のルートを 1 つずつ事前レンダリングします。ロケールルーティングとリクエストロケールの解決には、動的ルートと同じセットアップを使用します。

## 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 ミドルウェアガイド](/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]

設定されている各ロケールについて、1 つのルートパラメータを返します:

```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` が各ロケールごとに1回事前レンダリングされます。
## Next steps

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