静的サイト生成

概要

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

静的サイト生成とは？

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

`app` router用のSSG

要件

i18nアプリで静的サイト生成を有効にするには、いくつかの要件があります。 appディレクトリまたはpagesディレクトリのどちらを使用しているかによって、要件は若干異なります。

アプリはNext.js app routerを使用している必要があります。
アプリはi18nルーティングをサポートしている必要があります（i18nルーティングを参照）
アプリはローカル翻訳を使用している必要があります（ローカル翻訳を参照）

手順

ステップ1: まず、アプリのルートレイアウトに<GTProvider>コンポーネントがあることを確認してください。

app/[locale]/layout.tsx

import { GTProvider } from 'gt-next';

アプリがi18nルーティングを使用しているため、プロバイダーは[locale]/layout.tsxファイルに配置する必要があります。

ステップ2: 次に、アプリが翻訳を読み込むためにloadTranslations関数を使用していることを確認してください。さらに、<GTProvider>にパラメータとしてロケールを渡してください。ロケールはparamsオブジェクトから取得できます。

app/[locale]/layout.tsx

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

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>
  )
}

ステップ3: 次に、すべてのフックとコンポーネントがgt-next/clientからインポートされていることを確認してください。

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

これは重要です。なぜなら、gt-next/clientからインポートされたフックとコンポーネントは、静的に生成されたページのビルド時には存在しないヘッダーを読み取ることがないからです。

Next.jsアプリがgetStaticParams関数を正しく使用するように設定されていることを確認してください！

以上です！アプリは複数言語での静的サイト生成をサポートするようになりました！

`pages` ルーターのための SSG

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

静的サイト生成

概要