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

`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`](/docs/react/nextjs/reference/functions/get-locale)関数を定義します。

## リージョン検出を無効にする [#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回事前レンダリングされます。

<Callout type="warn">
  このセットアップでは、Next.js サーバーをデプロイしたままページを事前レンダリングできます。`output: 'export'` を使用するプロジェクトでは、`proxy.ts` または `middleware.ts` が存在するとビルドできません。完全に静的なエクスポートを行うには、ミドルウェアを削除し、`dynamicParams = false` をエクスポートして、すべてのロケールパスを生成し、それらのパスに直接リンクしてください。ロケール検出とリダイレクトは利用できなくなります。
</Callout>

## Next.js の互換性を確認する [#compatibility]

カスタム `getLocale.ts` ファイルは、事前レンダリング時にルートの `[locale]` パラメータにアクセスする必要があります。お使いの Next.js バージョンで利用可能な API を使用してください。

| Next.js バージョン          | ルートロケール API                                  |
| ---------------------- | -------------------------------------------- |
| 15.5 以降                | `next/root-params` の `locale()`              |
| 15.2.0 および 15.2.3～15.4 | `next/server` の `unstable_rootParams()`      |
| 15.2 より前               | この App Router SSG セットアップを使用する前にアップグレードしてください |

`gt-next` のサポート対象 peer 範囲には、Next.js 15.2.1 と 15.2.2 は含まれません。これらのバージョンは 15.2.3 以降にアップグレードしてください。

Next.js 15.2.0 または 15.2.3～15.4 では、次を使用してください。

```ts title="./getLocale.ts"
import { unstable_rootParams } from 'next/server';

export default async function getLocale() {
  const params = await unstable_rootParams();
  return params?.locale;
}
```

現在のプロジェクトでは、[ミドルウェアガイド](/docs/react/nextjs/app-router-middleware#root-locale)にあるNext.js 15.5以降向けの`next/root-params`の例を維持してください。

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

### ロケールを特定できませんでした

Next.js によるページの事前レンダリング中は、ミドルウェアは実行されません。`getLocale.ts` がプロジェクトルートに存在するか、[`getLocalePath`](/docs/react/nextjs/config#request-function-paths) がそのファイルを指していることを確認してください。

任意のルート値に対して、デフォルトロケールへのフォールバックではなく 404 を返す場合は、[`isLocaleSupported`](/docs/react/nextjs/reference/functions/is-locale-supported) を使用して `[locale]` パラメータを検証してください。

### `DYNAMIC_SERVER_USAGE`

このエラーは、静的レンダリング中に動的なリクエスト API にアクセスしたことを示します。次の点を確認してください。

* `getLocale.ts` はルートルートパラメータのみを読み取ること。
* `getRegion.ts` は固定値または `undefined` を返すこと。
* どちらの関数も `headers()` や `cookies()` を呼び出さないこと。

Cache Components を有効にしている場合は、より厳格な [Cache Components のセットアップ](/docs/react/nextjs/cache-components)にも従ってください。

### ルートパラメータのエクスポートエラー

`locale` のエクスポートが存在しないというエラーは、通常、プロジェクトで使用している Next.js のバージョンに対して誤った API を使用していることを意味します。[互換性表](#compatibility)を確認してください。

`[locale]` セグメントは、App Router ツリー内で最初の動的セグメントである必要もあります。ルートレイアウトは `app/[locale]/layout.tsx` に配置してください。このセグメントより上のレイアウトでは、事前レンダリング中にルートロケールを読み取れません。

### メタデータ画像ルート

Open Graph、Twitter、アイコン、Apple アイコンのファイルは、内部的には Route Handler であるため、`next/root-params` を読み取れません。他のサーバーヘルパーを使用する前に、`params.locale` を読み取り、[`registerLocale`](/docs/react/nextjs/reference/functions/register-locale) を呼び出してください。詳細は、[リクエストロケールの登録](/docs/react/nextjs/registering-request-locales#metadata-images)を参照してください。

## Next steps

- /docs/react/nextjs/app-router-middleware
- /docs/react/nextjs/registering-request-locales
- /docs/react/nextjs/cache-components
- /docs/react/nextjs/locale-alias-seo

## Sitemap

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