ビルド時に静的なHTMLを生成

[slug]/page.tsxのような動的ページでリクエスト時に動的にページを表示するのではなく、generateStaticParamsはビルド時に事前に静的生成するのでページの表示が早い

generateStaticParamsの使い方

[slug]/page.tsx：

const Page = async ({
  params,
}: {
  params: Promise<{ slug: string }>;
}) => {
  const { slug } = await params;
  const post = await getSinglePost(slug);

  if (!post) {
    notFound();
  }
  
---

export async function generateStaticParams() {
  const posts = await prisma.posts.findMany()
  return posts.map((post) => ({ slug: post.slug }));
}

[slug]や[id] のパターンをgenerateStaticParams()でreturnする

別の例： /[id]/page.tsx

import React from "react";

const ids = [
  { id: "1", content: "Page 1 Content" },
  { id: "2", content: "Page 2 Content" },
  { id: "3", content: "Page 3 Content" },
];

const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
  const { id } = await params;
  const content = ids.find((item) => item.id === id)?.content;
  return <div>PageById: {id} {content}</div>;
};

export default Page;

export const generateStaticParams = async () => {
  return ids.map((item) => ({
    id: item.id,
  }));
};

npm run build ：

├ ○ /                                    183 B           104 kB
├ ● /[slug]                              3.05 kB         277 kB

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses generateStaticParams)

SSG が上手くいくと SSGとしてビルドされたことが表示される

build時にHTMLが生成されない場合

原因

親レイアウト（layout.tsx）や、importしているコンポーネントに非同期処理がある
- 例：session取得

対策

1 . session取得等の原因となっていそうな箇所を取り除く。そのような処理はルートを分ける

2 . "force-static" をpage.tsxに書くと原因を無視して静的に生成される

export const dynamic = "force-static";

searchParamsとcache

searchParams を使ったページネーションを行っている page.tsx でforce-static を使い SSGにしても、1ページ目だけが静的に生成され、2ページ以降は生成されずページ移行 ( ?page="2")が機能しない
またsearchParams を使ったpageでは export const revalidate も機能しない

原因：

searchParamsはリクエスト時に初めて決定される動的な値なので、SSGには出来ない

Nextjs：generateStaticParams (SSG)

Nextjs：generateStaticParams (SSG)