開発環境において、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'
があるとエラーを吐くということでしょう。
コメント