Next.jsディレクトリ構成について

はじめに

Next.js, TypeScriptでオリジナルアプリを制作していてコンポーネントや関数などを別ファイルに書き出すうちにディレクトリ構成について疑問に思うことがあったので、学習の振り返りと今後オリジナルアプリ制作に取り掛かる方や現在オリジナルアプリを制作していてディレクトリ構成に悩んでいる方の参考になればと思い、記事を書くことにしました！
(slackでぶべさんにディレクトリ構成について質問した時に、他の受講者の方数名の反応があったので、もしかしたら気になってる人いるかもなって思ったのもきっかけです笑)

よく使うディレクトリについて

_componentsディレクトリ
このディレクトリは名前の通りでpage.tsxでimportして使うコンポーネントを格納するディレクトリになります。

_typesディレクトリ
このディレクトリでは、TypeScriptの型定義を記述したファイルを格納します。各ファイル毎に型定義を記述すると再利用しづらかったりするので型定義もディレクトリに書き出すといいと思います。

_libsディレクトリ
このディレクトリでは、supabaseやday.jsなど外部サービスやインストールしたライブラリの定義ファイルを格納します。

_utilsディレクトリ
このディレクトリでは、繰り返し利用する関数や処理の定義ファイルを格納します。

_hooksディレクトリ
このディレクトリでは、Reactのカスタムフックを定義したファイルを格納します。データのfetch処理などをカスタムフックとして定義して格納しておくといいと思います。

以上がよく利用するディレクトリになります。
これらのディレクトリはappディレクトリ配下に作成して使用します。
例えばappディレクトリ配下にusersディレクトリを作成(app/users)し、usersディレクトリ内のpage.tsxでしか使用しないコンポーネントやフックがある場合は、appディレクトリ配下の_componentsディレクトリや_hooksディレクトリとは別にusersディレクトリ内に_componentsディレクトリや_hooksディレクトリを作成します(app/users/_components, app/users/_hooks)。
仮にusersディレクトリ配下に作成した_componentsディレクトリ内のコンポーネントをapp直下のpage.tsxやusersディレクトリ以外のディレクトリ内のファイルでも使用するようになった場合は、コンポーネントやカスタムフックの定義ファイルをapp/users/_components, app/users/_hooksからapp/_components, app/_hooksに移動して使用するようなイメージです。

今回の記事は以上になります。
ディレクトリ構造については、オリアプを作り始めてから初めて考え始めることだと思うので、その際に少しでも役に立てば幸いです。