【App Router】Next.jsのテンプレートを作ってみた

Next.js でのフィジビリティ調査やアプリ開発を行うにあたり、毎回のセットアップが大変なので、テンプレートプロジェクトを作りました！

以前、Pages Router でテンプレートプロジェクトを作っておいたのですが、App Router が Stable となったため、新しく作り直しました（一部、以前よりも洗練させました）。

テンプレートプロジェクト

テンプレートプロジェクトは 👇 です。
https://github.com/ayakaki/my-next-template-approuter

【テンプレートプロジェクトの全体像】
.
├── .env
├── .eslintrc.js
├── .gitignore
├── .prettier.config.js
├── .vscode
│   └── settings.json
├── README.md
├── jest.config.js
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── src
│   ├── app
│   │   ├── favicon.ico
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   │   └── home
│   │       ├── homeTemplate.tsx
│   │       ├── userTodo.tsx
│   │       └── userTodos.tsx
│   ├── constants
│   │   └── meta.ts
│   ├── features
│   │   ├── api
│   │   │   └── fetchTodos.ts
│   │   └── common
│   │       ├── getPageTitle.ts
│   │       └── typeGuards.ts
│   ├── hooks
│   │   └── useTodo.ts
│   ├── libs
│   │   └── axiosFetcher.ts
│   ├── stores
│   │   └── favoriteCount.ts
│   ├── styles
│   │   └── globals.css
│   ├── tests
│   │   └── features
│   │       └── common
│   │           └── getPageTitle.test.ts
│   └── types
│       └── todo.ts
├── tailwind.config.js
└── tsconfig.json

解説

主要ファイルについて

ファイル名	説明
.eslintrc.js	ESLint の設定ファイル（コメント等をしやすいため、.json ではなく.js を採用）
.prettier.config.js	Prettier の設定ファイル
jest.config.js	Jest の設定ファイル
tailwind.config.js	Tailwind CSS の設定ファイル
tsconfig.json	TypeScript 読み込み等の設定ファイル

ディレクトリ構造について

ディレクトリ	説明
src/app/**/*.tsx	ルーティングに直接関係してくるファイルを格納します。page.tsx がメインですが、layout.tsx や loading.tsx が入ってきます。
src/components/**/*.tsx	基本的に src/components/配下は React の主目的である UI を担当します（= *.tsxファイル）。そのファイルに機能を記載するのは、.tsxファイルの責務としては重く、保守性が低くなると考えるため、機能は別の .tsファイルに切り分け、src/features/配下に格納するようにします。※UI を司るコンポーネントを格納します。
src/constants/**/*.ts	定数ファイルを格納します。
src/features/**/*.ts	機能を司るファイルを格納します。
src/hooks/**/*.ts	カスタムフックファイルを格納します。
src/libs/**/*.ts	npm_modulesの機能をラップした機能を提供するファイルを格納します。
src/stores/**/*.ts	状態管理にて取り扱う変数を取り扱うファイルを格納します。
src/styles/**/*.css	スタイルシート（CSS, SCSS）を格納します。
src/tests/**/*.test.ts	テストファイルを格納します。※src/test/配下は componentsディレクトリやfeaturesディレクトリと同様の構造にするとテストファイルの管理がしやすいと考えています。
src/types/**/*.ts	typeの定義ファイルを格納します。

最後に

テンプレートはあくまでテンプレートなので、プロジェクトに応じて、適切に不要なパッケージを削除したり、構造を変えていけたらいいなと思います。