どこまでがReactか

覚え直しは、ほとんど要らない

Next.js を始めると聞くと、また一から覚え直すように感じます。実際には逆で、React実践で書いた部品はそのまま動きます。

そのまま使えるのは次のものです。

• JSX の書き方
• props と型
• useState と useEffect
• 自分で作ったフック
• map で一覧を並べる書き方

React実践で作った ItemCard を、ファイルごと components/ に置いて import すれば、そのまま表示されます。書き換えは要りません。

Next.js 固有のものはどこか

新しく覚えるのは、React が持っていなかった部分だけです。

• フォルダの形が URL になること
• layout.tsx page.tsx loading.tsx のような名前の決まり
• どの部品をサーバーで動かすかの区別
• next/link や next/image のような Next.js 専用の部品
• metadata による title の指定

境界の見分け方は簡単です。import の行き先が react なら React の機能、next/ で始まっていれば Next.js の機能です。

この区別が効く場面

現場で「これは React の話か、Next.js の話か」が分かると、調べ方が変わります。useState の挙動で困ったら React のドキュメント、ページが表示されないなら Next.js のドキュメントです。エラーメッセージを検索するときも、この区別があるだけで当たりが早くなります。

演習

React実践で作った ItemCard を、Next.js のページから使います。