Zenn
📘

Next.jsのディレクトリ構成：現在の個人的ベストプラクティス

2023/03/25に公開
Next.js
tech

Next.js は React のフレームワークであり、効率的なディレクトリ構成が開発の円滑さに大きく影響します。今回は、個人的に気に入っているディレクトリ構成についてまとめました。。

ディレクトリ構成

my-next-app/
├── public/
│   ├── images/
│   │   ├── favicon.ico
│   │   └── logo.svg
│   └── fonts/
├── src/
│   ├── components/
│   │   ├── Common/
│   │   │   ├── Footer/
│   │   │   │   ├── index.tsx
│   │   │   │   ├── Footer.module.css
│   │   │   │   └── Footer.test.tsx
│   │   │   ├── Header/
│   │   │   │   ├── index.tsx
│   │   │   │   ├── Header.module.css
│   │   │   │   └── Header.test.tsx
│   │   │   └── Layout/
│   │   │       ├── index.tsx
│   │   │       ├── Layout.module.css
│   │   │       └── Layout.test.tsx
│   │   ├── Button/
│   │   │   ├── index.tsx
│   │   │   ├── Button.module.css
│   │   │   └── Button.test.tsx
│   │   └── Card/
│   │       ├── index.tsx
│   │       ├── Card.module.css
│   │       └── Card.test.tsx
│   ├── pages/
│   │   ├── api/
│   │   │   └── example.ts
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── index.tsx
│   │   ├── index.test.tsx
│   │   └── about.tsx
│   │       └── about.test.tsx
│   ├── styles/
│   │   ├── globals.css
│   │   └── theme.ts
│   ├── utils/
│   │   ├── api.ts
│   │   └── utils.ts
│   ├── hooks/
│   │   └── useCustomHook.ts
│   ├── contexts/
│   │   ├── ThemeContext.ts
│   │   └── UserContext.ts
│   ├── types/
│   │   └── index.d.ts
│   └── config/
│       └── index.ts
├── package.json
├── tsconfig.json
├── next.config.js
└── .gitignore

解説

1. 静的ファイルは public フォルダに配置

画像やフォントなどの静的ファイルは、public フォルダに配置します。これにより、アプリケーション内で容易に参照できるようになります。

2. 共通コンポーネントは components/Common に配置

共通で使用されるコンポーネントは、components/Common フォルダにまとめることで、他のコンポーネントと区別されやすくなります。

3. CSS Modules を使用

ページごとのスタイルは、CSS Modules を利用してコンポーネントフォルダ内に配置します。これにより、スタイルが局所的に適用され、名前空間の衝突を防ぐことができます。

4. テストファイルは各フォルダに配置

各コンポーネントやページに対応するテストファイルは、それぞれのフォルダ内に配置します。これにより、テスト対象となるコンポーネントを容易に特定できます。

5. グローバルなスタイルは styles フォルダに格納

プロジェクト全体のスタイリングは、styles フォルダ内に一元管理することで、保守性が向上します。

6. APIやユーティリティ関数は utils フォルダに配置

関連する機能がまとめられていることで、再利用やメンテナンスが容易になります。

7. カスタムフックは hooks フォルダに格納

カスタムフックが一箇所にまとまることで、見つけやすくなります。

8. コンテキストは contexts フォルダに配置

アプリケーションの状態管理やテーマ設定など、コンテキストを使って共有されるデータが一元管理されます。

9. 型定義は types フォルダにまとめ

型定義ファイルが一箇所に集まることで、型に関する情報が整理され、管理しやすくなります。

10. 設定ファイルや環境変数関連は config フォルダに配置

プロジェクト全体の設定が一箇所にまとまり、簡単に管理できます。

まとめ

Next.js は頻繁にアップデートされるため、適宜見直すことが重要ですが、現在の個人的なベストプラクティスです。ご意見やおすすめがあれば教えてください。

Discussion