Next.js のデザインとロジックの分離の記事

Next.js で整える。デザインとロジックの分離 - Speaker Deck

読んだ。

pageExtension というやつを一切知らなかったので、そんな機能あるのか！という気持ちで読んだ。知らなかった〜

next.config.js: Custom Page Extensions | Next.js

getStaticProps や getStaticPaths がページ下部にあって、その他ロジックがページ上部にあるのはたしかにな〜という気持ちになった。たぶん Next.js を使う前に React を普通に書いてきた人は export をページ下部で行う(ことが多い気がする)のでそこまで大きな違和感ではなかったような気もする。

ロジックと UI の分離という意味ではファイルで分割しているので非常に分かりやすいなあというのは感じる。初見の場合は特にそんな気がする。あとはこれをチームのメンバーに慣れてもらえるかどうか、という感じだろうか。

これを見て Vue の Composition API でロジックを別ファイルに分離するのと似ているな〜と思った。

コンポーネントに必要なロジックをそのコンポーネントと同階層に同名で(.page.tsx と.hook.tsx)置いておくというのは分かりやすいかも。

Nuxt では Composition API を使って分離したロジックは完全にロジック置き場として独立しており、同階層に UI とロジックの両方が存在するというような状況は(たぶん)初めて見たと思う。

React を書いていたときは CSS Modules を使って書いていたのでコンポーネントのファイルとそのコンポーネントのスタイルファイルが同階層に存在する状態は見てきた。

↑ この要素も含めたら、UI/ロジック/スタイルをそれぞれ別ファイルに書いて同階層に置くということになる。一応方法としてはひとつの選択肢にはなりそう。管理するファイルが増えるというコストはあるが、どのコストを取ってどのメリットを享受するかの問題なので、まあ本当に選択肢のうちのひとつという感じだけど。