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

この記事は約3分で読めます。

開発環境において、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;

dynamicParamsがtrueであると、リアルタイムでレンダリングされますが
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'があるとエラーを吐くということでしょう。

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました