Next.js AppRouter(SSG) build時にgenerateStaticParamsエラー

はじめに

Next.js AppRouter(SSG)でビルドを実行したところ、以下のエラーが発生しました。


Error: Page "/blogs/detail/[id]/draft" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

このエラーメッセージでは、/blogs/detail/[id]/draftでは、 generateStaticParams() がないので、output: export(SSG)設定では使用できません。という内容が表示されています

前提

Next.js AppRouter
SSG
microCMSを使用したブログサイト
記事ページの画面パス: /blogs/detail/[id]
記事下書きプレビューページの画面パス: /blogs/detail/[id]/draft?draftKey=[draftKey]
記事下書きプレビューページは限定的に、SSGでなくCSR(クライアントサイドレンダリング)でコンテンツを取得したかった
DynamicRoutesを活用し、paramsからidを、queryからdraftKeyを取得しようとしていた

結論

SSGを使うと、[id] などの動的パスに対応するために generateStaticParams() が必ず必要とのことでした。

しかし、記事下書きプレビューページでは、 CSRしたかったため generateStaticParams の設定をしていませんでした。

そのため、記事下書きプレビューページに、動的パスが存在するのでSSGの判定をされるが、generateStaticParams の設定がないためエラーが起きていました。

‍

generateStaticParamsの例


export async function generateStaticParams() {
  const ids = await getAllBlogIds();

  const paths = ids.map((id) => {
    return {
      id
    };
  });

  return [...paths];
}

‍

改善方法

以下の方針に変更し、問題を解決しました。

DynamicRouteを使用しない
useSearchParamsでqueryを取得
‘use client’を設定し、useEffect内でデータフェッチ

1. DynamicRoutesを使用しない

先述のとおり、SSGでbuildする場合、[id] などのDynamicRoutesを使用すると、generateStaticParams() を設定しないとエラーになる。

そのため、DynamicRoutesを使用しない方針にし、以下のようにパスを変更した、

Before


/blogs/detail/[id]/draft?draftKey=[draftKey]

After


/blogs/detail/draft?id=[id]&draftKey=[draftKey]

2. useSearchParamsでqueryを取得

CSRでidやdraftKeyなどのqueryを取得したい場合、useSearchParamsを使用する。


const searchParams = useSearchParams();
const id = searchParams.get('id');
const draftKey = searchParams.get('draftKey')

3. ‘use client’を設定し、useEffect内でデータフェッチする

CSRの場合、useEffectを使用し、データフェッチを行います。

そのため、先頭に’use client’;を指定しましょう。


'use client';

export const DraftPage: React.FC = () => {
  const searchParams = useSearchParams();
  const id = searchParams.get('id');
  const draftKey = searchParams.get('draftKey')
  
  const [article, setArticle] = useState(null);
  
  useEffect(() => {
    // クライアントサイドでデータフェッチ
    ...以下省略

‍