静的サイト生成

概要

このガイドでは、i18nアプリを静的サイト生成に対応させる方法を説明します。

静的サイト生成とは？

静的サイト生成（SSG）は、Next.jsの機能の一つで、ビルド時に静的ページを生成することができます。 これはパフォーマンスやSEOの向上に役立ちます。

app ルーター向けの SSG

前提条件

i18n アプリで静的サイト生成を有効にするには、いくつかの前提条件があります。 app ディレクトリか pages ディレクトリを使うかによって、要件は少し異なります。

1. アプリが Next.js の app ルーターを使用していること。
2. アプリが i18n ルーティングに対応していること（i18n routing を参照）
3. アプリがローカル翻訳を使用していること（local translations を参照）

手順

import { GTProvider } from 'gt-next';

import { loadTranslations } from '@/i18n/loadTranslations';
import { GTProvider } from 'gt-next/client';

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  return (
    <GTProvider loadTranslations={loadTranslations} locale={locale}>
      {children}
    </GTProvider>
  )
}

import { useGT } from 'gt-next/client';
import { T } from 'gt-next/client';

Next.js アプリが getStaticParams function を正しく設定して使用していることを確認してください！

以上です！これでアプリは多言語の静的サイト生成をサポートできるはずです！

カスタム getLocale を用いた SSG

SSG はロケール解決に影響することがあります。 このため、URL パスからロケールにアクセスする独自の getLocale() 関数を定義する必要があります。 使用している Next.js のバージョンによって、実装は異なる場合があります。

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() {
  const result = (await unstable_rootParams())?.locale;
  return result;
}

以前のバージョン

残念ながら、以前のバージョンでは SSG で URL のパスパラメータにアクセスする方法はありません。 Next.js 15.1 以降にアップグレードする必要があります。

pages ルーターのための SSG

🚧 このセクションは現在作成中です。🚧