Open4

Next.jsをうまく扱うためのまとめ

tanotano

ディレクトリ構成を再考する

仕事で取り組んでいたプロジェクトで、ページや機能といった面で共通しているはずのファイル群が、それぞれ全く別のフォルダに入っていました。この状態で問題なことは、ディレクトリを見ただけではファイルのつながりがわからず、目的のファイルに到達するまで、エディタの機能などを使って辿る必要があることです。他のメンバーが修正を加えようとするときや、数カ月後に自分でソースを見直す必要があるときなど、誰がいつ見てもわかるようなディレクトリ構造が望ましいのではないかと思います。
具体的には、それぞれのページで固有のmodalを、modalというフォルダの下ににまとめているなどです。

解決策

責務ごとにファイルをまとめる手法が良いと考えています。
下記記事の内容がとても良いと感じています。
https://qiita.com/honey32/items/dbf3c5a5a71636374567

具体例

Next.jsの例。features配下以外のそれぞれのフォルダは汎用的なもの専用。
featuresについては下記記事を参考にしました。
https://zenn.dev/yodaka/articles/eca2d4bf552aeb

├─ components/
│  ├─ elements/
│  └─ layouts/
├─ config/
├─ const/
├─ features/  -ここに責務ごとにまとめる
│  └─ /hoge
│     ├─ api/
│     ├─ const/
│     ├─ components/
│     ├─ hooks/
│     └─ types/
├─ hooks/
├─ libs/
├─ pages/  -ルーティング
└─ types/
tanotano

getLayoutが便利なので使用する

ページごとにLayoutを定義するもの。ページ遷移時に状態が維持されるので、永続的な状態の維持が可能になる。

使いどころ

  • Header, Footerなどの再読込がなくせる。
  • 共通する状態や設定の管理(Recoil, TanStack Query, SWRなど)

https://nextjs.org/docs/basic-features/layouts

This layout pattern enables state persistence because the React component tree is maintained between page transitions. With the component tree, React can understand which elements have changed to preserve state.

tanotano

styleはインラインスタイルが良い

良いところ

  • cssがコンポーネントと分離されない
  • cssに対する命名はなくなる。（コンポーネントの命名は必要だが）

候補たち

  • style属性への記述
  • Tailwind CSS
  • Styled-components
  • emotion
  • vanilla-extract

React, Next.jsといった開発では、コンポーネントの粒度が細かくなるという前提ですが、それぞれのコンポーネントの記述対するstyleを、コンポーネントと別れた場所に記載すると、対象のcssがとても見つけにくくなります。
Tailwindで記述する場合、classに記載する内容は増えますが、コンポーネントの関心事が一つに絞られていて、小さな構造となっていれば可読性も落ちません。
一つのコンポーネント、一つのHTMLのタグに、多くの役割を持たせていると可読性が落ちるので、シンプルに役割を分割するなどの工夫が必要だとは思います。例えば、aタグなどのインライン要素にサイズの指定をしようとするなど、複雑怪奇になるのでやめるべきです（普通にcssを書く場合もそうですが）。