Next.jsを使ったFeatureベースのディレクトリ構成のサンプル

Nexst.js で Features ディレクトリ構成を使ったフォームページのサンプルを紹介します。

前提技術

この記事で取り上げるフォーム構築に使用する主な技術は以下の通りです：

• Next.js
• TypeScript
• react-hook-form
• zod
• styled-components

ディレクトリ構成

以下が Feature-based のディレクトリ構成の一例です：

/my-next-app
|-- /node_modules
|-- /public
|   |-- /images
|   |-- favicon.ico
|
|-- /src
|   |-- /features
|   |   |-- /formFeature
|   |   |   |-- /components
|   |   |   |   |-- FormInput.tsx
|   |   |   |   |-- ConfirmPage.tsx
|   |   |   |   |-- CompletedPage.tsx
|   |   |   |-- /schemas
|   |   |   |   |-- formSchema.ts
|   |   |   |-- formSlice.ts
|   |   |   |-- index.ts
|   |   |   |-- styled.ts // styled-components のスタイリング定義
|   |
|   |-- /pages
|   |   |-- _app.tsx
|   |   |-- form
|   |   |   |-- index.tsx
|   |   |   |-- confirm.tsx
|   |   |   |-- completed.tsx
|   |
|   |-- /styles
|       |-- globals.css
|
|-- package.json
|-- next.config.js
|-- tsconfig.json

各ディレクトリの役割

• /formFeature ディレクトリ: フォーム関連の機能をまとめる。
• /components ディレクトリ: フォームの各部分のコンポーネントを格
• /schemas ディレクトリ: zod で作成されたバリデーションスキーマ
• /pages ディレクトリ: Next.js のルーティングのためのディレクトリ。
• styled.ts: styled-components を使ってコンポーネントのスタイルを定義するファイル。

まとめ

この規模のサービスで Features のディレクトリ構成はややオーバーだと思いますが、
規模が大きくなってくると、このようなディレクトリ構成を採用することで、
コードの可読性や保守性を高めることができます。