Next.js Reactフレームワークの作成者であるVercel氏は、先頃、最初の年次Next.js ConfでNext.js 10を発表した。Next.js 10は、自動画像最適化、国際化されたルーティング、および継続的なWebバイタル分析を備えている。
Next.js 10は、HTMLの <img> 要素のドロップイン置換として使用される組み込みの <Image> コンポーネントを追加する。Google Chromeチームと共同で開発された新しい Image コンポーネントは、遅延読み込み、レイアウトプレースホルダ、比率ベースの画像応答性、画像形式の最適化などのベストプラクティスを実装することで、ページのパフォーマンスを向上させようとしている。
次のHTMLコード:
<img src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">
次のように置き換えられる:
import Image from 'next/image'
<Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">
Next.jsチームは、画像のフットプリントを最適化することの重要性について説明した:
画像はWebページの総バイト数の50％を占めます。
画像は、ページが読み込まれたときに表示される最大の要素であることが多いため、最大のコンテンツ全体の描画に大きな影響を与えます。最大のコンテンツ全体の描画は、Googleがまもなく検索ランキングで使用するコアWebバイタルです。
すべての画像の半分は1メガバイトを超えるサイズです。[…] サイトは 2,000 x 2,000 ピクセルの画像をロードしますが、電話は 100 x 100 ピクセルとしてしか表示しません。[…]
Webページの画像の30％が最初のビューポートの外にあります […]
Webサイト上の画像の99.7％は、WebPのような最新の画像形式を使用していません。
Webページ上の画像をパフォーマンスの高い方法で使用するには、サイズ、重量、遅延読み込み、最新の画像形式など、多くの側面を考慮する必要があります。
さらに、Next.jsは、ビルド時にイメージを最適化する代わりに、ユーザの要求に応じてオンデマンドでイメージを最適化する。これにより、ビルド時間がサイト上のイメージの数から切り離される。画像がたくさんある大規模なサイトでの開発者のエクスペリエンスは、大幅な改善が見られるだろう。Image コンポーネントの完全なドキュメントは、オンラインで入手できる。
Next.js 10の国際化されたルーティングと言語検出は、国際的な視聴者に対応するWebアプリケーションのニーズに対応する。Next.js 10は、サブパスルーティング (例: /en/blog) とドメインルーティング (例: example.nl) の両方をサポートしている。言語検出は、/ ルートの Accept-Language ヘッダで構成されたロケールに依存する。開発者は、国際化されたルーティング構成を next.config.js ファイルに含める。次に、検出された言語に対応するページがユーザに提供される。国際化 (ドメイン) ルーティング構成の例は次のとおりである:
// next.config.js
module.exports = {
i18n: {
locales: ['en', 'nl'],
domains: [
{
domain: 'example.com',
defaultLocale: 'en'
},
{
domain: 'example.nl',
defaultLocale: 'nl'
}
]
}
}
国際化されたルーティングの完全なドキュメントは、オンラインをご覧ください。
Next.js 10は、Webバイタル分析のライブ測定も追加する。Googleが今年初めにランキングシグナルとしてコアWebバイタルを追加すると発表したように、GoogleがWeb Performance Working Groupを通じて推進する指標を最適化するサイトの能力は重要な成功要因になるかもしれない。
一度測定する代わりに、継続的に測定するようになります。
開発デバイスで測定する代わりに、訪問者が使用している実際のデバイスから測定が行われます。[…]
パーソナライズされたコンテンツや広告をロードするサイトでも、ユーザごとにパフォーマンスが大きく異なる場合があります。[…] エミュレートされたテストでは、これらの重要なシグナルをキャプチャできません。
したがって、Next.js Analyticsは、実際の訪問者からのデータを使用して計算されたスコア (Real Experience Scoreと呼ばれる) を提供する。ドキュメント — オンラインでアクセス可能には、Next.jsアプリケーションで機能を有効にする手順が記載されている。
Next.js 10には、開発者のエクスペリエンスを向上させたり、特定の業種に対応したりする追加機能が含まれている (Next.js Commerce)。開発者には、リリースノート全体をオンラインで確認することをお勧めする。
Next.jsは、MITライセンスの下で利用可能なオープンソースソフトウェアである。Next.jsの貢献ガイドラインと行動規範に従って、Next.js GitHubリポジトリを介して貢献を歓迎する。