Next.js公式チュートリアル進行中

3/16章だけども

というオチはどうでもよろしいですが、一つ言い訳をば
今日は仕事終わりに今後の仕事についての面談をしていたのさ。エージェントさんと。
元々18:30に始まるはずだったんだけどトラブルにより19:00くらい開始になったのさ。

そんなこんなで時間は食ってしまったわけだけど、とても有意義なお話ができたと思っている。
自分のやりたいことを「あなたらしい」って言ってもらえるのってうれしいね。

てことで前置き終わり。
第三章はフォントと画像の最適化
ということで

Next.jsではフォントは追加読み込みが発生しないように静的にホストするんだそうな。なるほど。(なんとなく理解している)

そしてそのために設定ファイルにてフォント読み込みの記述を行って、定数をそれぞれ返り値として各ファイルで設定ファイルを読み込みclassNameの値に突っ込むと。
理屈はわかったのでこれは何回もやるしかないな。

画像についても最適化がされていると。
Imageコンポーネントによって

  • 画像の読み込み時にレイアウトシフトが自動的に発生するのを防ぐ

  • 大きな画像がビューポートの小さいデバイスに送信されないように、画像のサイズを変更する

  • デフォルトで画像を遅延読み込み(画像がビューポートに入るとロードする)

  • ブラウザがサポートしている場合はWEBPやAVIFなどの最新形式で画像を提供する

え、すごない。
画像コンポーネントこんなすごいやつやったんか。

しかし濃い。濃いぞNext.jsチュートリアル!
こんなにボリュームがあったのか!
正直三目並べとかやってる場合じゃなかったかな。(あれはあれで感覚がつかめて楽しかったけども。)

明日は4章だー

この記事が気に入ったらサポートをしてみませんか?