最近作った支出管理アプリのディレクトリ構成を紹介します。
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の型定義ファイルを入れるディレクトリ。