概要

Static rendering は Next.js フレームワークの中核機能であり、ビルド時にページを事前レンダリングすることで、最適なパフォーマンスと SEO を実現します。 このことから、すべての Next.js ネイティブライブラリは、このレンダリングモデル上でシームレスに動作する必要があります。 gt-next 6.9.0 では static rendering をサポートし、ロケール検出や翻訳機能を損なうことなく、国際化対応アプリケーションが Next.js の静的生成機能を最大限に活用できるようになりました。

Static Rendering とは何ですか？

Static rendering は、各リクエストごとではなくビルド時に HTML を生成します。 この手法は非常に高いパフォーマンスを実現しますが、ユーザーのロケールを判定するために一般的にリクエストヘッダー、Cookie、あるいは middleware に依存する i18n ライブラリにとっては課題となります。 Static rendering では、これらリクエスト時の依存情報が利用できないため、ロケール検出には別のアプローチが必要になります。

静的レンダリングのセットアップ

gt-next を設定する前に、generateStaticParams のドキュメントに従って、Next.js アプリケーションが静的生成用にセットアップされていることを確認してください。

セットアップには、次の 3 つの主要なコンポーネントが含まれます。

1. 設定で静的レンダリングを有効にする

export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

2. ミドルウェアを設定する

動的なリクエストに対応するためのミドルウェアをセットアップします：

// proxy.ts (Next.js 16以降) または middleware.ts (Next.js 15以下)
import { createNextMiddleware } from 'gt-next/middleware'

export default createNextMiddleware();

export const config = {
  matcher: [
    "/((?!api|static|.*\\..*|_next).*)",
  ],
}

3. 静的ロケール検出を定義する

静的レンダリング時にロケールを判定するための getStaticLocale 関数を作成します。この関数は静的生成時にのみ実行されます。SSR の場合は、デフォルトの動作（ヘッダーや Cookie などの読み取り）が使用されます。

Next.js 15.5以降

// getStaticLocale.ts
import { locale } from "next/root-params";

export default async function getStaticLocale() {
  return await locale();
}

Next.js 15.1〜15.4

// getStaticLocale.ts  
import { unstable_rootParams } from "next/server";

export default async function getStaticLocale() {
  return (await unstable_rootParams())?.locale;
}

静的レンダリング時のリージョン検出をカスタマイズするために getStaticRegion を呼び出せます。

利点

Next.js ネイティブ: 静的レンダリングとの互換性のために、Next.js に組み込まれている root params システムを活用します。

追加機能

静的生成に加えて、このリリースでは、SSR 環境と静的レンダリング環境の両方で設定可能なカスタム getLocale() および getRegion() 関数のサポートも追加されています。