ナニモワカラナイ Next.js(App Router)のディレクトリ構成

2024/12/19 「フロントエンドチョットデキル ミニ #01」で話した、Next.js(App Router)のディレクトリ構成の話です。

Transcript

1. ナニモワカラナイ Next.js(App Router)のディレクトリ構成 2024/12/19 フロントエンドチョットデキル ミニ #01
2. oken（@displaycontents） ちょっと株式会社 フロントエンドエンジニア 自己紹介 もつ煮ときゅうりが好きです。 Next.jsとTypeScriptとCSSも好きです。
3. Next.js(App Router)のディレクトリ構成どうしてますか？ ・featureベース？layerベース？ ・Container/Presentationalパターン？ ・Atomic Design？ ・Clean Architecture？ ・feature sliced design？
4. いつも迷います。 0→1で作る場合でも、運用する場合でも。
5. それぞれメリット・デメリットはあるものの、正解がない。
6. こんな構成にしてみた。という話です。
7. 今回取り入れたもの ・featureベース ・Container/Presentationalパターン ・balletproof-reactを参考にした ・Colocation
8. featureベース（package by feature）とは？
9. featureベース（package by feature）とは？ という話をする前に・・・
10. layerベース（package by layer）とは？ レイヤーごとにディレクトリを分ける構造。 フロントエンドにはあまり馴染みのないMVC(Model・View・Controller)のような形。
11. Next.jsでいうとcomponents/とかhooks/とかapi/とかlib/とかで区切られているよう なイメージ。 layerベース（package by layer）とは？
12. featureベース（package by feature）とは？ 機能別にディレクトリを分ける構造。
13. featureベース（package by feature）とは？ Next.js(App Router)の簡単な例でいうと、src/app/内にページごとに区切られてい るようなイメージ。
14. Container/Presentationalパターンとは？ Container層とPresentational層に分けて、関心の分離をする方法。 ・Container層 ロジックの部分。APIのfetchや処理の部分。 ・Presentational層 UIの部分。
15. というわけで、こんな感じのディレクトリになりました。
17. ディレクトリの内容 app/ 基本的にはpage.tsxのみ。featuresで定義したコンポーネントを使用。 components/ Presentational層。UIのみ。テスト用のStory。 features/ Container層。APIのfetch処理やそれを使用したコンポーネント。 RSCで直接fetch。また、Unitテスト用のファイル。
18. 今回の設計パターンを採用した理由 1. Next.jsのApp Routerを使用していること。 2. テスト戦略を気にした。 3. Next.jsのドキュメントの「Project Structure」をベースにした。
19. 1. Next.jsのApp Routerを使用していること App RouterではPages RouterのようにgetStaticPropsとかgetServersidePropsでfetchを しなくても良い。 RSC（非同期コンポーネント）で直接fetchができる。 Propsでバケツリレーをする必要がなくなる。 ※page.tsxでfetchしてPropsしていくこともできる。
21. 2. テスト戦略を気にした UIとロジックを分離することで、それぞれテストの容易性や目的を明確した。 今回の場合だと、UIの部分にStorybook、featuresの部分にunitテストなどを入れてい る。
22. Unitテスト stories
23. Next.js自体は特にこだわりがないらしい。 ただ、いくつかパターンを提供しており、その中の一つで「Colocation」をあげている。 tsxやcss、testなどのファイルが1つのフォルダに同居している状態。 3. Next.jsのドキュメントの「Project Structure」をベースにした
24. まとめ
25. 問題点 ・もっとファイルやフォルダが増えたらどうするの？ ・運用に耐えられる？ ・他のフレームワークだとどうなる？ ・学習コストとか。
26. ありがとうございました