home / blog / NextJSのディレクトリ構成

NextJSのディレクトリ構成

最近作った支出管理アプリのディレクトリ構成を紹介します。

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

githubリポジトリ : https://github.com/kanaru-ssk/pay-history

components/

コンポーネントを入れるディレクトリ 。

pagesで直接呼び出せされるものをcomponents直下に。

一つコンポーネントからしか呼び出されるものは、以下のようにディレクトリを掘って作成。こうすると開発する時にファイルを探す手間が減らせる。

components /
   ┗ Tab/
          ┣ index.tsx
          ┗ TabItem.tsx

それ以外の共通で使うコンポーネント( Button, LinkText, Input, Loadingなど )をcomponents/common/に。

hooks/

カスタムhookを入れるディレクトリ。今回はログイン状態を共有するuseContextと、タブの状態を共有するuseContextを作成しています。

libs/

hooksを使用しない関数を入れるディレクトリ。firebaseのAPIを叩く関数群、フォームのバリデーション関数群、データ加工用の関数群などがここに入っています。

pages/

ルーティングのディレクトリ。pages/配下のファイルにはロジックや、TailwindCSSを書かず、ルーティングと<Head>のみを記述する。

styles/

cssファイルを入れるディレクトリ。今回はTailwindCSSを使っているのでglobal.cssの一つだけ。

types/

TypeScriptの型定義ファイルを入れるディレクトリ。