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];
}

‍


改善方法

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

1. DynamicRouteを使用しない
2. useSearchParamsでqueryを取得
3. ‘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(() => {
    // クライアントサイドでデータフェッチ
    ...以下省略

‍


さいごに

今回は、Next.js AppRouter(SSG)でbuild時に、generateStaticParams関連のエラーが発生する問題について説明しました。

今回のミスは、画面パスの設計を、安易に考えてしまったのが原因でした。

Next.js AppRouter(SSG)で、画面パスの設計をするときは、十分気をつけましょう。

今回の記事が、参考になれば幸いです。

‍