概要

この動作は現在非推奨です。新しい動作については、gt-next@6.10.0を参照してください。

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

静的レンダリングとは？

静的レンダリングでは、リクエストごとではなく、ビルド時にHTMLを生成します。 この方式は非常に高いパフォーマンスを実現する一方で、通常はユーザーのロケールを判断するためにリクエストヘッダー、Cookie、またはミドルウェアに依存するi18nライブラリにとっては難しさがあります。 静的レンダリング中は、こうしたリクエスト時の情報を利用できないため、ロケールの検出には別のアプローチが必要になります。

静的レンダリングの設定

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() 関数もサポートされます。