Next.js+ヘッドレスCMSで始める「モダンWebサイト制作入門」を読んで

TL;DR

Next.js+ヘッドレスCMSではじめる！「モダンWebサイト制作入門」
という本をふと見かけ
「Next.jsを手っ取り早く全体像を理解したいな」と思い読んで見ました。

なかなか良かったので、自分なりに備忘録としてポイントまとめます。

全体的な所感

• Next.jsとヘッドレスCMSをあまり触ったことのない人には全体感を理解するためには良い本だった。
• ゼロからサンプルサイト(簡単なブログ)みたいなものを作ることを通じて、全体的な理解が出来る。
• ただ、一方で最低限のプログラミング言語やWEB開発に関する素養がある人が読む本だとも思った。
  (結構途中で、あーそう書くんだね。とか技術的なTipsが出てきたので、この本だけで理解するのはちょっと難しい気もした。)

特に学べたPoint、Tips

• Nextはnext/imageという機能があり、<Image>タグ用いて、大きな画像をうまいことブラウザ毎に最適に読むことができる。
• default exportと、named export
• layoutはNested-layoutsでいい感じにネストして書き分けられる。
• これはCSSの話だけど

.list:nth-child(even) {
    flex-direction: row-reverse;
}

というCSSの書き方痺れた。これでいい感じでメンバーの写真とか左右に振り分けれる。

• App RouterとPages Router
  appディレクトリにいい感じにフォルダーつくることでルーティングできる。Next.js 12以前では、pagesディレクトリつくる形だった。

• サーバコンポーネントとクライアントコンポーネント
  "use client"とか入れてコンポーネント毎に制御出来る。

• SSR, CSR, SSG(Static Site Generation), ISR(Incremental Static Regeneration)
  
  
  

• SSGの場合、webhook使って更新をお知らせして再ビルドする

• ページ毎に最適なレンダリング方法を選ぶことができる

• Suspense使うと、クライアントサイドコンポーネントの範囲を狭めることができる

• micro CMS便利。(シンプルなブログとかこれで良さそう)

• お問い合わせのバックエンドはHotspot使うと良いかも

備忘録的になりましたが良い本でした！！
良かったら、是非お手にとって見てください！！