src
├─ components
│ ├─ pages : 1つのページを表すComponent。
│ │ hoge.page.tsx: layoutsにhoge.tsxを嵌めたコンポーネント。src/pages配下のルーティングファイルが参照する。
│ │ hoge.tsx: featuresやuiを組み合わせてpageの中身(main部分)となるコンポーネント
│ ├─ features : 各機能に関心を持つComponent(例えばuser, article, category...のようなやつ)
│ ├─ ui : featureに関心を持たない、見た目を伴うComponent(Buttonとか)
│ └─ layouts : uiのうちページを横断するグローバル系のComponent(header、sidebar、navigation barとか)
├─ configs : 設定ファイルとか
├─ hooks : 複数のComponentで共有したいような汎用的な処理
├─ libs : プロジェクトに依存しないライブラリ実装
└─ pages : ルーティングのみの責務。nextjsの機能で配置するだけでルーティングしてくれる。ディレクトリ構成がそのままパスになる。
└─ styles : globalなスタイリング定義
page
↑ ↑
layout feature
↑
ui
- 自分の横か下にある分類軸の Component のみ import してよい。
- page 以外は自分の所属する分類軸の参照も OK
hoge/
├─ hoge.tsx
├─ hoge.css.ts
├─ hoge.hooks.ts … 複数のComponentで共有しないロジック(ロジックはできるだけコンポーネントに書かない)
└─ index.ts
※ components/pages配下のみ `hoge.page.tsx`がある
- 関数や変数名
- 基本的にこの命名規則に従いたい(途中から参考にしててまだ統一できてない)
- ファイル名
- src/components 配下のtsxファイル
- パスカル
- 主要な公開リポジトリみた感じコンポーネントファイルは一般的にパスカルになってることが多そう
- src/pages 配下のtsxファイル
- ケバブ
- pages 配下のファイル名がそのまま URL のパスになる仕様上、pages 配下のファイルはケバブが好ましい
- tsファイル
- キャメル
- src/components 配下のtsxファイル
- tailwindcss
- 大量のクラス名が用意されていて css 網羅してる。用意されたクラス名だけで細かなスタイリングができる。チートシート
- headlessui/react
- tailwind でスタイルされたコンポーネントを import して使用できる。複雑なコンポーネントで使用
- heroicon
- Taiwind ファミリーのアイコンフォント。通常の画像と違い、CSS ベースで色や大きさ、太さを調整することができる
- styled-jsx-plugin-postcss
- jsx ファイルに直接スタイリングかける
- ディレクトリ構成
- 各コンポーネントの設計
- vanilla-extract の実装
- react-error-boundary
- 公式ドキュメント
- コンポーネント内で発生した JavaScript エラーをキャッチしフォールバック用の UI を表示
- next-seo
- Next.js のプロジェクトで SEO 管理を簡単にするためのプラグイン
- next/bundle-analyzer
- 各バンドルサイズを可視化できる
- recoil
- 公式ドキュメント
- 状態管理ライブラリ