home / blog / NextJSのディレクトリ構成をちょっと改善した

NextJSのディレクトリ構成をちょっと改善した

先程NextJSのディレクトリ構成のアドバイスを頂けたので早速少し改善しました。

before

next-app/
   ┣ public/
   ┗ src/
          ┣ components/
          ┃   ┗ common/
          ┣ hooks/
          ┣ libs/
          ┣ pages/
          ┣ styles/
          ┗ types/

after

next-app/
   ┣ public/
   ┗ src/
          ┣ components/
          ┃   ┗ common/
          ┃   ┗ pages/      <- new!
          ┣ hooks/
          ┣ libs/
          ┣ pages/
          ┣ styles/
          ┗ types/

components/pages/ディレクトリを追加して、pages/からは対応する1つのコンポーネントのみを呼び出すようにしました。

こうすることで、pages/ディレクトリはルーティングのみを考えればよくなり、ディレクトリ毎の責務を明確にできました。

参考リンク : SPA Componentの推しディレクトリ構成について語る