pages ディレクトリのコンポーネントの命名

6/10 とかに書いた bulletproof-react のディレクトリ構成を参考に Next.js のディレクトリを構成している。

ページを src/pages/hoge のようにして Container Component として、 src/features/Hoge 以下に機能として Functional Component を置くというもの。

不要なものを削ったりして完璧なコピーにはなっていないが、骨格のほとんどを真似させてもらっている感じになっている。

その中で、 pages と features の名前が同じコンポーネントができることに気づいた。

src/pages/hoge/index.tsx と src/features/Hoge/index.tsx で、両方とも export default Hoge のようになるということ。

もちろんそうならない場合もあるけど、こうなることもある。

なので、 pages のほう( Container Component のほう)は export default HogePage のように suffix として Page とつけるような規約を考えた。

こうすることで features と被ることは確実になくなる( features のほうで page という命名をコンポーネントにしないことが前提になるけど)

同じコンポーネント名だと import 時のパスでしか判断できないので微妙かなと思ったんだけど、コンポーネントの命名、意外とこういうことあると思うんだけどみんなどうやってるんだろうか。