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

📆November 10, 2020🔖 Next.jsNotion Blog

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

  • パッケージのアップデートを行ったのみ
  • プロダクションコードに変更は加えていない
  • 雑に package.json でバージョンを上げたら動いた
  • 詳細は公式ブログにお任せしたいと思いますが、以下で個人的に気になるアップデートをいくつか列挙します。


    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 で新機能はないとのことでしたが、細かいイベントハンドラ周りの処理が変わっているっぽいです。このブログへの影響は特になさそうですがパフォーマンスが上がってることを期待。