静的サイト生成

概要

このガイドでは、静的サイト生成をサポートするためにi18nアプリをセットアップする方法を紹介します。

静的サイト生成とは何ですか？

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

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

要件

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

アプリはNext.jsのappルーターを使用している必要があります。
アプリは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

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

静的サイト生成

概要