実装の流れ
コンポーネント分け
※細かく分けすぎると「保守性」が悪くなり、粗すぎると「再利用性」が悪くなる
↓
１ファイルの中に複数コンポーネントを記述し、名前付きインポートで対応することもできるが、チームの方針に従うべき。
①
繰り返し使うもので分ける。
ex) Header,Footer,Hero
②
componentsフォルダにそれぞれを用意。
③
さらにHeader,Footerは全ページに入っているので、Layoutにまとめるとより使い回しをしやすくなる。
※HeaderとFooterの間の要素はその時によって変わるので、propsで受け取るのが理想。
④
③のまま全ページに反映させてもいいが、Next.jsには「初期で全ページに反映させてくれる機能」があるのでそっちを使ってみる。
_app.js
**Component**には、レンダリングされるページの関数コンポーネントが渡ってきます。
→つまり現在のページに対応するコンポーネントが渡されます。
**pageProps**には、Conmponet に渡された関数コンポーネントが受け取る
propsが格納されたオブジェクトが渡ってきます。
→つまり現在のページに対応するコンポーネントに渡されるべきpropsが格納されている。
⑤
blogなどを作成したいときはURLを「blog/〇〇」にしたいと思う。
その場合は単にblog.jsを作成しても意味がないので、blogフォルダーを作成してから、随時必要なファイルを作成する
⑥
cssの設定
baseとなるcssは、globals.css
globalとなるcssは、utils.module.css
localとなるcssは、各コンポーネントに適したcss
※utils.module.cssを他のファイルでも使いたい時はcomposesで導入する