Next.jsのSSG構成でDynamic Routesの使用時に例外ページでエラーが発生するときの暫定措置

2024-10-29

開発環境において、Next.js の App Router でダイナミックなルーティングを行う際、
存在しないページへアクセスした場合に 404 画面に遷移させる方法があります。

そのロジックを組むとエラーが発生してしまう事象が発生しているので
エラー内容と暫定措置の方法を記します。

実装内容

const Page = () => {
  return (
    <>page</>
  );
};

export default Page;

export async function generateStaticParams() {
  return [{ id: '0' }, { id: '1' }];
}

export const dynamicParams = false;

dynamicParamstrue であると、リアルタイムでレンダリングされますが
SSG のため false とします。
ビルド時生成されていない静的ページにアクセスがあった際は、404 へ遷移されます。

エラー内容

フォルダー名、ファイル名をそれぞれ [page]/page.tsx として、前段の実装を行ったとき、
正規のページ(ビルド時に生成された静的ページ)にアクセスしても
以下のようなエラーが発生します。

error: Page "/[id]/page" is missing exported function "generateStaticParams()", which is required with "output: export" config.

暫定措置

next.config.js にある output: 'export' をコメントアウトします。

静的サイトを生成(SSG)する場合、output: 'export' の記述が必要となります。
そのため、開発時のみコメントアウトする必要がありますね。

文献

おわりに

不具合の報告は上がっていますが、未だ解決できていない様子です。
Issue で上がっているプルリクはテストで失敗しています。
(PR の内容を手動で修正しても改善しないようです。)

...

と思いましたが、SSG であればこの挙動が正常なのでしょうか。。
結局のところ動的ページが XXX.html という形で出力されるので
例外のページは、Apache であれば .htaccess で制御する形になるんですよね。

と考えると export const dynamicParams = false; が SSG で使えないという意味で
output: 'export' があるとエラーを吐くということでしょう。