GitHub

静的サイト生成は、ビルド時にページを事前レンダリングし、各localeごとに静的なHTMLファイルを作成します。これにより、高いパフォーマンスとSEO効果を実現し、ユーザーがサイトにアクセスした時点で翻訳コンテンツがすべて即座に利用できるようになります。

要件: 国際化を正しく機能させるには、SSGにはmiddleware routingとローカルの翻訳が必要です。

App Router

セットアップ要件

GT で SSG を有効にするには、次が必要です:

App Router と middleware によるルーティング - middleware ガイドを参照
ローカルの翻訳 - ローカルの翻訳ガイドを参照
クライアントサイドのインポート - gt-next ではなく gt-next/client を使用

ステップ 1: GTProvider の設定

[locale] レイアウトに GTProvider を配置し、loadTranslations 関数を渡します:

// app/[locale]/layout.tsx
import { GTProvider } from 'gt-next/client';
import { loadTranslations } from '@/loadTranslations';

export default async function RootLayout({ children, params }) {
  const { locale } = await params;
  
  return (
    <GTProvider loadTranslations={loadTranslations} locale={locale}>
      {children}
    </GTProvider>
  );
}

ステップ 2: クライアント用のインポートを使う

すべての GT コンポーネントとフックは gt-next/client からインポートします:

// ✅ SSG用にクライアントインポートを使用
import { useGT, T } from 'gt-next/client';

// ❌ これらはSSGを阻害します
import { getGT } from 'gt-next/server';
import { T } from 'gt-next';

ステップ 3: generateStaticParams を設定する

対応ロケール用に generateStaticParams を必ず設定してください。

カスタム getLocale

SSG に対応する、静的生成で使えるカスタム getLocale 関数を作成します:

Next.js 15.5 以降

// getLocale.ts
import { locale } from "next/root-params";
export default async function getLocale() {
  return await locale();
}

Next.js 15.1～15.4

// getLocale.ts  
import { unstable_rootParams } from "next/server";
export default async function getLocale() {
  return (await unstable_rootParams())?.locale;
}

以前のバージョン

残念ながら、以前のバージョンでは SSG で URL のパスパラメータにアクセスする手段はありません。Next.js 15.1 以降にアップグレードしてください。

よくある問題

ページが静的に生成されない

ページが静的に生成されていない場合は、すべての GT コンポーネントとフックが gt-next/client から import されていることを確認してください。

// ❌ これらはSSGを阻害します
import { getGT } from 'gt-next/server';
import { getLocale } from 'gt-next/server';
import { getTranslations } from 'gt-next/server';
import { T } from 'gt-next';

// ✅ これらはSSGで動作します
import { useGT, T } from 'gt-next/client';

ヘッダーやクッキーを読み取る処理は、静的生成を無効化します。

次のステップ

ローカル翻訳ストレージ - SSG セットアップに必須
ミドルウェアガイド - locale ルーティングに必須

要件: 国際化を正しく機能させるには、SSGにはmiddleware routingとローカルの翻訳が必要です。

App Router

セットアップ要件

GT で SSG を有効にするには、次が必要です:

App Router と middleware によるルーティング - middleware ガイドを参照
ローカルの翻訳 - ローカルの翻訳ガイドを参照
クライアントサイドのインポート - gt-next ではなく gt-next/client を使用

ステップ 1: GTProvider の設定

[locale] レイアウトに GTProvider を配置し、loadTranslations 関数を渡します:

// app/[locale]/layout.tsx
import { GTProvider } from 'gt-next/client';
import { loadTranslations } from '@/loadTranslations';

export default async function RootLayout({ children, params }) {
  const { locale } = await params;
  
  return (
    <GTProvider loadTranslations={loadTranslations} locale={locale}>
      {children}
    </GTProvider>
  );
}

ステップ 2: クライアント用のインポートを使う

すべての GT コンポーネントとフックは gt-next/client からインポートします:

// ✅ SSG用にクライアントインポートを使用
import { useGT, T } from 'gt-next/client';

// ❌ これらはSSGを阻害します
import { getGT } from 'gt-next/server';
import { T } from 'gt-next';

ステップ 3: generateStaticParams を設定する

対応ロケール用に generateStaticParams を必ず設定してください。

カスタム getLocale

SSG に対応する、静的生成で使えるカスタム getLocale 関数を作成します:

Next.js 15.5 以降

// getLocale.ts
import { locale } from "next/root-params";
export default async function getLocale() {
  return await locale();
}

Next.js 15.1～15.4

// getLocale.ts  
import { unstable_rootParams } from "next/server";
export default async function getLocale() {
  return (await unstable_rootParams())?.locale;
}

以前のバージョン

残念ながら、以前のバージョンでは SSG で URL のパスパラメータにアクセスする手段はありません。Next.js 15.1 以降にアップグレードしてください。

よくある問題

ページが静的に生成されない

ページが静的に生成されていない場合は、すべての GT コンポーネントとフックが gt-next/client から import されていることを確認してください。

// ❌ これらはSSGを阻害します
import { getGT } from 'gt-next/server';
import { getLocale } from 'gt-next/server';
import { getTranslations } from 'gt-next/server';
import { T } from 'gt-next';

// ✅ これらはSSGで動作します
import { useGT, T } from 'gt-next/client';

ヘッダーやクッキーを読み取る処理は、静的生成を無効化します。

次のステップ

ローカル翻訳ストレージ - SSG セットアップに必須
ミドルウェアガイド - locale ルーティングに必須

要件: 国際化を正しく機能させるには、SSGにはmiddleware routingとローカルの翻訳が必要です。

App Router

セットアップ要件

GT で SSG を有効にするには、次が必要です:

App Router と middleware によるルーティング - middleware ガイドを参照
ローカルの翻訳 - ローカルの翻訳ガイドを参照
クライアントサイドのインポート - gt-next ではなく gt-next/client を使用

ステップ 1: GTProvider の設定

[locale] レイアウトに GTProvider を配置し、loadTranslations 関数を渡します:

// app/[locale]/layout.tsx
import { GTProvider } from 'gt-next/client';
import { loadTranslations } from '@/loadTranslations';

export default async function RootLayout({ children, params }) {
  const { locale } = await params;
  
  return (
    <GTProvider loadTranslations={loadTranslations} locale={locale}>
      {children}
    </GTProvider>
  );
}

ステップ 2: クライアント用のインポートを使う

すべての GT コンポーネントとフックは gt-next/client からインポートします:

// ✅ SSG用にクライアントインポートを使用
import { useGT, T } from 'gt-next/client';

// ❌ これらはSSGを阻害します
import { getGT } from 'gt-next/server';
import { T } from 'gt-next';

ステップ 3: generateStaticParams を設定する

対応ロケール用に generateStaticParams を必ず設定してください。

カスタム getLocale

SSG に対応する、静的生成で使えるカスタム getLocale 関数を作成します:

Next.js 15.5 以降

// getLocale.ts
import { locale } from "next/root-params";
export default async function getLocale() {
  return await locale();
}

Next.js 15.1～15.4

// getLocale.ts  
import { unstable_rootParams } from "next/server";
export default async function getLocale() {
  return (await unstable_rootParams())?.locale;
}

以前のバージョン

残念ながら、以前のバージョンでは SSG で URL のパスパラメータにアクセスする手段はありません。Next.js 15.1 以降にアップグレードしてください。

よくある問題

ページが静的に生成されない

ページが静的に生成されていない場合は、すべての GT コンポーネントとフックが gt-next/client から import されていることを確認してください。

// ❌ これらはSSGを阻害します
import { getGT } from 'gt-next/server';
import { getLocale } from 'gt-next/server';
import { getTranslations } from 'gt-next/server';
import { T } from 'gt-next';

// ✅ これらはSSGで動作します
import { useGT, T } from 'gt-next/client';

ヘッダーやクッキーを読み取る処理は、静的生成を無効化します。

次のステップ

ローカル翻訳ストレージ - SSG セットアップに必須
ミドルウェアガイド - locale ルーティングに必須

静的サイト生成

このページについて

静的サイト生成

このページについて

静的サイト生成

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする