はじめに

Next.js14のApp Routerで動的ルートを構築していた際に詰まった箇所があったので、
備忘として残す。

発生事象

動的ルートのフォルダ構成とリンククリック時の遷移先URLが一致しているにもかかわらず、
404 NotFoundしか表示されない。

・キャッシュクリア
・動的ルートを/app/bbs-posts/[id]/page.tsxで設定しており、idの型をnumberからstringに変換
・page.tsxの拡張子を.jsxに変更

上記3つ目の拡張子を変更した際にモジュールインポートの再読み込みが行われ？解決した。
※解決後、拡張子は元の.tsxに戻してます。

また同事象が発生した場合は、以下手順で確認する。

１．リンククリック時の遷移先URLが意図したパスになっているか？
２．１のURLにのっとったフォルダ構成となっているか？
３．表示したいページ（２のフォルダ内にあるpage.tsx）を再作成する。