# はじめに
この記事は、個人的にこうしたらよいのではないかという意見をまとめたものです。
ご指摘などあればコメントで教えていただけると嬉しいです。:pray:

# 前提
こちらの記事は**App Routerを使用しているプロジェクトのディレクトリ構成**について書いています。

# コンポーネントをどのように管理するか
結論、**様々なページで使用するコンポーネントはappディレクトリ配下に置いて、あるページのみでしか使用しないコンポーネントはappディレクトリの外に置く**ということが大切であると考えます。

## appディレクトリ管理するコンポーネントの例
・buttonコンポーネント
・inputコンポーネント
・layoutを指定しているコンポーネント　など
※components配下に「elements」フォルダや、「layout」フォルダを作成し、コンポーネントをまとめていくと管理しやすくなります。

## appディレクトリの外で管理するコンポーネントの例
appディレクトリ配下で管理しないコンポーネントは、**「features」という名前のディレクトリで機能ごとにコンポーネントを管理します。**

例えば、ブログの一覧ページで使用するコンポーネントを作成するとして、そのコンポーネントは、他の機能では使用しない、ブログページ固有のコンポーネントであるので、featuresディレクトリ配下に「Blog」ディレクトリを作成し、その中にまとめるなどすれば、管理しやすくなるのでは無いかと思います。
つまり、featuresディレクトリは、機能ごとに使用するコンポーネントを管理するディレクトリと言えるでしょう。

https://zenn.dev/hokuto_tech/articles/fdabaff60f5af2#app-router%E3%81%A7features%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B%EF%BC%9F


# テストファイルの置き場所
テストファイルは、同じ階層に置くとよいかと思います。
テストファイルはテストフォルダに全てまとめるというのも良いかと思いますが、コンポーネントが増えてくると、ファイルを見つけにくくなってしまうので、同階層にまとめたほうが良いと思っています。Storybookを使用するのであれば、そのファイルも一緒に置いておくと良いかと思います。
以下の記事が参考になります。


# まとめ
今回は、Next.jsのディレクトリ構造のベストプラクティスについて考えました。
最初にも書きましたが、自分個人としての意見なので、ご意見やご指摘など書いていただけると幸いです。


# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# はじめに
この記事は、個人的にこうしたらよいのではないかという意見をまとめたものです。
ご指摘などあればコメントで教えていただけると嬉しいです。:pray:

# 前提
こちらの記事は**App Routerを使用しているプロジェクトのディレクトリ構成**について書いています。

# コンポーネントをどのように管理するか
結論、**様々なページで使用するコンポーネントはappディレクトリ配下に置いて、あるページのみでしか使用しないコンポーネントはappディレクトリの外に置く**ということが大切であると考えます。

## appディレクトリ管理するコンポーネントの例
・buttonコンポーネント
・inputコンポーネント
・layoutを指定しているコンポーネント　など
※components配下に「elements」フォルダや、「layout」フォルダを作成し、コンポーネントをまとめていくと管理しやすくなります。

## appディレクトリの外で管理するコンポーネントの例
appディレクトリ配下で管理しないコンポーネントは、**「features」という名前のディレクトリで機能ごとにコンポーネントを管理します。**

例えば、ブログの一覧ページで使用するコンポーネントを作成するとして、そのコンポーネントは、他の機能では使用しない、ブログページ固有のコンポーネントであるので、featuresディレクトリ配下に「Blog」ディレクトリを作成し、その中にまとめるなどすれば、管理しやすくなるのでは無いかと思います。
つまり、featuresディレクトリは、機能ごとに使用するコンポーネントを管理するディレクトリと言えるでしょう。

https://zenn.dev/hokuto_tech/articles/fdabaff60f5af2#app-router%E3%81%A7features%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B%EF%BC%9F


# テストファイルの置き場所
テストファイルは、同じ階層に置くとよいかと思います。
テストファイルはテストフォルダに全てまとめるというのも良いかと思いますが、コンポーネントが増えてくると、ファイルを見つけにくくなってしまうので、同階層にまとめたほうが良いと思っています。Storybookを使用するのであれば、そのファイルも一緒に置いておくと良いかと思います。
以下の記事が参考になります。


# まとめ
今回は、Next.jsのディレクトリ構造のベストプラクティスについて考えました。
最初にも書きましたが、自分個人としての意見なので、ご意見やご指摘など書いていただけると幸いです。


# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

前提

コンポーネントをどのように管理するか

続きを読むには単価診断を受けてください 30秒