開発環境において、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'
の記述が必要となります。
そのため、開発時のみコメントアウトする必要がありますね。
文献
- generateStaticParams issue with output: "export" in config during development #64906
- generateStaticParams() not detected when using parallel routes / dynamic routes using output: export #63951
おわりに
不具合の報告は上がっていますが、未だ解決できていない様子です。
Issue で上がっているプルリクはテストで失敗しています。
(PR の内容を手動で修正しても改善しないようです。)
...
と思いましたが、SSG であればこの挙動が正常なのでしょうか。。
結局のところ動的ページが XXX.html
という形で出力されるので
例外のページは、Apache であれば .htaccess
で制御する形になるんですよね。
と考えると export const dynamicParams = false;
が SSG で使えないという意味で
output: 'export'
があるとエラーを吐くということでしょう。