はじめに
Next.js14のApp Routerで動的ルートを構築していた際に詰まった箇所があったので、
備忘として残す。
発生事象
動的ルートのフォルダ構成とリンククリック時の遷移先URLが一致しているにもかかわらず、
404 NotFoundしか表示されない。
フォルダ構成
遷移先URL
試したこと
・キャッシュクリア
・動的ルートを/app/bbs-posts/[id]/page.tsxで設定しており、idの型をnumberからstringに変換
・page.tsxの拡張子を.jsxに変更
結果
上記3つ目の拡張子を変更した際にモジュールインポートの再読み込みが行われ？解決した。
※解決後、拡張子は元の.tsxに戻してます。
まとめ
また同事象が発生した場合は、以下手順で確認する。
１．リンククリック時の遷移先URLが意図したパスになっているか？
２．１のURLにのっとったフォルダ構成となっているか？
３．表示したいページ（２のフォルダ内にあるpage.tsx）を再作成する。