フロントエンド開発の先端を突っ走るNext.js
next.js アプリの初期化( npx create-next-app@latest <アプリ名> ) または yarn create next-app <アプリ名> または bun create next-app <アプリ名> )

next.js の 多言語ブログで ビルド時に静的にルートを生成して高速化する

● npm run build の結果が Dynamic の時は、静的にルート生成できるかどうかを検討すると良いです。

┌ ○ /                                    141 B          84.6 kB
├ λ /[Code]/about                  2.16 kB         276 kB
λ  (Dynamic)  server-rendered on demand using Node.js

↑ この記号が出ているということはダイナミックルートになっています。
こちらを静的ルートに変更してみましょう。

layout.tsx または page.tsx に以下を追加します。

import {locales} from "@/i18n";

/**
 * 多言語をSSGする
 */
export function generateStaticParams() {
  return locales.map((locale) => ({locale}));
}

これで再度ビルドして静的にルートを生成されていることを確認します

No.2495
08/27 12:03

edit