「作って学ぶ Next.js/React Webサイト構築」の概要
本書はNext.jsとmicroCMSを使ってJamstackなブログサイトを作ろうという内容です。
Next.jsでのWebサイト制作解説本はおそらく本書が初なのでとても貴重な一冊。（電子本は除く）
ターゲット層はアマゾンの説明書きには「HTML/CSSからステップアップをしたい方」となっていますがここは少し疑問。
模写で一応進められるようにはなっていますが、JavaScript、Reactの構文基礎知識前提で解説されているところが諸所に見られ、初心者に優しく作られているとは到底思えませんでした。
microCMSに関してはUIの操作解説自体が全くされておらず、いつの間にかブログ記事が作成状態で話が進んでいたり、ブログのオブジェクトデータを読み込むためのmicroCMS側の事前設定がされていないためエラーが消えないなどの致命的な解説不足が見られました。
本書自体には書かれていないけど、Github、microCMS、VsCodeなど、設定をしないと読み進められないようなことに関してはダウンロード付録のPDFファイルにすべて記載してありました。
本音を言えば、全部本に載せて欲しいところですが、ページ数など大人の事情があるのでしょうか？
その項目に来たら「事前にPDFを参照して設定を行わないとエラーになります」くらいの注意書きくらいは欲しいものです。
本書が発売されたのは2022年7月ですが、3か月後の10月にNext.jsはバージョン13にアップデート。
本書はバージョン12で解説されているため、早くも情報が少し古くなっているという悲しい現実もあります。
その辺の補填については、Githubで説明がなされているので一読必須です。
https://github.com/ebisucom/next-react-website
microCMSの画像サイズを取得するには事前に設定が必要
（239ページ）
microCMSの本文部分に挿入した画像をImageコンポーネントで読み込む箇所。
Imageコンポーネントではwidthとheightの指定が必須なため省略することができません。
本書でのコードは以下。
import parse from 'html-react-parser'
import Image from 'next/legacy/image'
export default function ConvertBody({ contentHTML }) {
const contentReact = parse(contentHTML, {
replace: (node) => {
if (node.name === 'img') {
const { src, alt, width, height } = node.attribs
return (
<Image
layout="responsive"
src={src}
width={width}
height={height}
alt={alt}
sizes="(min-width: 768px) 768px, 100vw"
/>
)
}
},
})
return <>{contentReact}</>
}
※Next.js13環境のため、import Image from 'next/legacy/image'と記載が変わります。
（Githubを参照）
https://github.com/ebisucom/next-react-website/blob/main/next13.pdf
microCMSからwidthとheightの値を取ろうとしていますが、microCMS側で先にサイズの付与設定をしておかないとそもそも値がnullとなってエラーとなります。
リッチエディタの「レスポンスにwidthとheightを含む」をONにしてください。
デフォルトがOFFなので注意です。
CSS Modules を利用しているのが気になる
本書はスタイリングにCSS Modulesを利用して執筆されています。
CSS ModulesはCSSを別ファイルで用意してjsファイルでimportして使うという方法です。
HTML、CSS従来の方法でとても分かりやすいですが、コンポーネント毎にCSSを分けていくのでファイル数が倍々に膨れ上がるというデメリットもあります。
さらに、CSS Modulesは近い将来非推奨になるかもしれないという情報もあるようです。
今はまだ大丈夫ですが、これからスタイリングを学ぶのであれば、CSS in JSで慣れたほうがいいかもしれません。
読了後の感想はやはり初学者はUdemyがベスト
読了しました。
ハマったところは結局挙げた1か所だけでした。
やることはコードを模写するだけなのですが、スペルミスによるエラーはよく出てしまいます。
このエラーを自力で見つけられるかどうかが挫折せずに最後まで読了できるかになると思います。
それと、問題が出ても質問ができないのは初学者にとってはなかなか厳しいです。
こういうところはやはりUdemyが秀でていると思います。
ここで私が本書を読む前に受講していたおすすめの講座を2つほど紹介します。
【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座
一つ目はShincodeさんの「【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座」です。
こちらの講座は本書と同じNext.jsとmicroCMSを利用してブログサイトを作るという内容です。
本書を読むのがつらくて最後まで行けなかったという方はこちらを受講してみてください。
【2022年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript
二つ目はCodeMafiaさんの「【2022年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript」です。
やはり、Next.jsを学ぶにもReactの基礎は理解しておいたほうがいいでしょう。
このReact講座もしかりですが、CodeMafiaさんはほかの講師ならスルーしてしまうであろう少し踏み込んだ解説もしてくださるのがポイントです。
内容は少し難しく感じますが、がっちり学びたい方におすすめです。
モダンJavaScriptの基礎から始める挫折しないためのReact入門
もう少しさらっと学びたい方は、じゃけぇさんの「モダンJavaScriptの基礎から始める挫折しないためのReact入門」がおすすめです。
TODOアプリを題材にしながら、JavaScriptで作る場合とReactで作る場合の違いを学べます。
6時間と比較的短いのでさらっと学べるでしょう。