このブログ(Notion Blog)の Next.js を v9.5 → v10.0 にアップデートした

// 🙎‍♂️ Yuji Tsuburaya📆 November 10, 2020🔖 Next.jsNotion Blog

先日の Next.js conf で Next.js v10.0 が発表されましたね。このブログで使用している Next.js も早速 v10.0 にアップグレードしてみました。

詳細は公式ブログにお任せしたいと思いますが、以下で個人的に気になるアップデートをいくつか列挙します。


next/image コンポーネントが使用可能に

Next.js が提供する image コンポーネントを使用することで、

をしてくれるようになりました。現状は素の img タグになっているので、そのうち置き換えをしたい気持ち。

// OLD <img src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture"> // NEW import Image from 'next/image' <Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">

Next.js Analytics が使用可能に

Vercel の管理画面から Analytics が使用可能になったので、早速使ってみました。描画時間や CLS(Cumulative Layout Shift)が発生している箇所等のパフォーマンス関連の分析結果を表示してくれるっぽいです。Google Analytics 的な、PV をカウントしたりする Analytics ではなく、パフォーマンスの方。

Vercel の管理画面
Vercel の管理画面

React 17 のサポート

React 17 のサポートが開始されました。ドキュメント(React v17.0 Release )を読む感じ、特に React 16 → React 17 で新機能はないとのことでしたが、細かいイベントハンドラ周りの処理が変わっているっぽいです。このブログへの影響は特になさそうですがパフォーマンスが上がってることを期待。


🦥(筆者が喜びます)

🔖 Next.jsNotion Blog