search

y4shiro / uma-card-deck-tools

uma-card-deck-tools.vercel.app
0 stars 0 forks source link

Next.js のディレクトリ構成決める #2

Closed y4shiro closed 2 years ago

y4shiro commented 2 years ago
y4shiro commented 2 years ago

ディレクトリ構成決める

色々ドキュメントを探したが、今回は下記が良さそうなので参考に構成する 私の推しフロントエンドディレクトリ構成と気をつけたいポイント

src/
├─ features/
│  ├─ Profile/
│  │  ├─ components/
│  │  │  ├─ UserInfo/
│  │  │  ├─ Sponsoring/
│  │  │  ├─ Achievements/
│  │  │  ├─ Organizations/
│  │  ├─ hooks/
│  │  ├─ functions/
│  │  ├─ api/
│  │  ├─ test/
│  │  ├─ stories/
│  │  ├─ index.tsx
│  ├─ Repositories/
│  ├─ Overview/
│  ├─ Header/
├─ components/
│  ├─ Button/
│  ├─ Icon/
├─ hooks/
├─ functions/

src/features/

ここに機能ごとにコンポーネントを分けて設置 上のコード例だと、Profile / Repositories / Overview / Header に分かれている 以前作ったプロジェクトでも似たような構成にしていたが、hooks や test も機能ごとに内包しているのが新しい点 以前のプロジェクトでは小規模ということで src/hooks に全ての hooks とその test を配置していたが、後半になると見通しが悪くなっていた feature 単位で分けることでだいぶ見通しが良くなりそう

hooks / functions / api は任意で配置するが、test / stories は必須とのこと 参照先の記事では統合テストのみ書くと書いているので、試してみて良さそうなら採用する hooks の単体テスト書かないのが少々不安点

src/components

プロダクト共通のコンポーネントを配置する これは無くても良さげ

src/hooks, src/functions

プロダクト共通の hooks や ロジックを置く functions は従来の libs/ や utils/ に相当? この部分はしっかり単体テストを書く

その他

定数を配置する src/constants、レイアウトを配置する src/layouts などを任意で追加しても良い

y4shiro commented 2 years ago

プロジェクトにある程度反映

α版で実装予定の機能を列挙する

common components

root page

about page

y4shiro commented 2 years ago

Layout コンポーネント実装

下記参考にした Next.jsのLayouts - Zenn

y4shiro commented 2 years ago

マージした