Next.js App Router(SSG)で動的ページが0件の場合のビルドエラー対処法

2024-10-30
佐川 恭平
#
#
#

はじめに

Next.jsのApp Routerを使用して静的サイトを生成する際に遭遇した問題とその解決方法について解説します。

具体的には、動的ページのデータが0件の場合に発生するビルドエラーとその回避方法を紹介します。

問題の概要

Next.jsのApp Routerを使用してSSG(Static Site Generation)プロジェクトを開発していた際、以下のような状況で問題が発生しました:

  1. プロジェクトでStatic Export(静的エクスポート)の設定を使用
  2. microCMSで記事を管理
  3. 記事が0件の状態でビルドを実行

設定内容

next.config.jsでの静的エクスポートの設定:


/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export"
}

module.exports = nextConfig

発生したエラー


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

このエラーは、動的ルーティングを使用するページでgenerateStaticParams()が適切に設定されていない場合に発生します。

今回は、動的パスが0件であったためこのエラーが発生しました。

generateStaticParams()では、必ず最低1つのパスを生成する必要があります。

解決方法

問題を解決するために、以下のアプローチを実装しました:

  1. 記事が0件の場合でも、最低1つの動的パスを生成するようにgenerateStaticParams()を修正
  2. 生成したダミーパスへのアクセス時は404ページにリダイレクト

実装コード


export async function generateStaticParams() {
  try {
    const articles = await getAllArticles();

    // 記事が0件の場合は、1つのパスを生成
    // 理由: Next.jsの静的生成の場合、最低1つのパスが必要であるため
    if (!articles || articles.length === 0) {
      return [{ id: 'undefined' }];
    }

    const paths = articles.map((article) => {
      return {
        id: article.id
      };
    });

    return [...paths];
  } catch (error) {
    console.error('Error in generateStaticParams:', error);
    return [{ id: 'undefined' }];
  }
}

export default async function Article_Detail({ params }: ArticleDetailProps) {
  // パラメータがundefinedの場合は、404ページにリダイレクト
  if (params.id === 'undefined') {
    notFound();
  }

  const { id } = params;
  const article = await getArticleDetail(id);

  return (
    // ... 記事の表示ロジック
  );
}

実装のポイント

  1. エラー回避: 記事が0件の場合でも{ id: 'undefined' }というパスを生成することで、ビルドエラーを回避
  2. エラーハンドリング: APIコール失敗時にも同様のダミーパスを生成
  3. 404ハンドリング: ダミーパスへのアクセス時はnotFound()を使用して404ページに適切にリダイレクト

まとめ

Next.jsのApp Routerで静的エクスポートを使用する場合、動的ページの生成には少なくとも1つのパスが必要です。このケースでは、ダミーのパスを生成することで問題を解決しました。

この方法により、コンテンツが0件の状態でもビルドを成功させることができ、かつユーザーには適切な404ページを表示することができます。

株式会社Grandreamでは、フルリモートであなたのスキルを活かし、活躍できるエンジニアを募集しております。 詳しくは採用ページをご確認いただき、お気軽にお問い合わせください。

株式会社グランドリームでは、AWSを駆使した開発からUI/UXデザインまで、Webアプリケーションに関するすべての要望に応えます。
まずは一度お気軽にご相談ください。

お問い合わせはこちら