【Next.js】動的ルーティング設定してみたv15.1.2【router】

参考にしたドキュメント

• Next.js公式ドキュメント
  • Project structure and organization
  • Dynamic Routes

概要

/hoge/[slug]のように複数のページを動的ルーティング設定したい。

結論

Next.js(v15.1.2)のディレクトリ構造やファイル構成を理解することで解決できた。

Next.jsの構成

src
└　app
　　├　page.tsx "/"
　　└　hoge
　　　　└　[slug]
　　　　　　└　page.tsx "/hoge/[slug]"

まとめ

公式ドキュメントを参考に、ディレクトリ構造を理解することで開発がスムーズに進んだ。