Next.jsチームはNext.js 11を先頃リリースした。新しいバージョンは、開発者とエンドユーザの実際のパフォーマンスと認識されるパフォーマンスの向上に努めている (起動時間、サードパーティのスクリプトの読み込み、画像とプレースホルダーの読み込み)。Next.js v11は、Create React AppアプリケーションをNext.jsに移行する実験的なcodemodも提供する。
Next.jsチームは、起動時間を短縮するWebpack用の新しいBabelローダを使用して、開発者にとってより良いエクスペリエンスを実現した。
開発者は、サードパーティスクリプトの3つの可能な読み込み戦略 (分析、広告、A/Bテスト、ソーシャル共有ウィジェット) のいずれかを指定することで、読み込みパフォーマンスを向上させることができる。各サードパーティスクリプトは、ページがインタラクティブになる前 (beforeInteractive)、ページがインタラクティブになった後 (afterInteractive)、またはページがアイドル状態のときに (lazyOnLoad) ロードされる場合がある。したがって、すぐに必要ではないサードパーティのスクリプト (ソーシャルメディアウィジェット) は、適切に遅延する可能性がある。カスタム <Script> コンポーネントは、次のようにスクリプト読み込み戦略を実装する:
<Script
src={url} // consent mangagement
strategy="beforeInteractive"
onLoad={() => {
// If loaded successfully, then you can load other scripts in sequence
}}
/>
Next.jsは、開発者の負担を軽減するために、デフォルトの読み込み戦略を (preloadまたはasyncから) defer に変更したとレポートしている。Google Chromeチームは、preload リソースのヒントに関連していくつかの課題を次のように説明している:
重要なリソースに preload を使用すると、ロードメトリックが改善されるかもしれませんが、これは大きなフットガンであり、開発者に大きなコストがかかります。preload は、ブラウザの自然なロードシーケンスを大まかに再作成して維持することに発展する可能性がありますが、完全に手動で行われます。これは、Chromeの深刻な問題によってさらに悪化します。
Facebookは、facebook.comサイトの再設計で、同様の一連の読み込み戦略を使用しているとレポートした。Facebookは、依存関係がフォールド上のコンテンツに影響を与えるか (importForDisplay)、影響を与えないか (importForAfterDisplay) に応じて特定のAPIを使用する依存関係をインポートする。A/Bテストは、さらに importCond APIでサポートされる。
Next.jsチームはさらに、カスタムの <Image> コンポーネントを使用してユーザエクスペリエンスの向上に努めている。v11では、次のように使用して、Image コンポーネントが画像のサイズを自動的に取得する:
import Image from 'next/image'
import author from '../public/me.png'
export default function Home() {
return (
// When importing the image as the source, you
// don't need to define `width` and `height`.
<Image src={author} alt="Picture of the author" />
)
}
Image コンポーネントはまた認識される読み込み時間を短縮することができるぼかしプレースホルダもサポートする。
事前に画像のサイズを取得し、プレースホルダを表示すると、累積レイアウトシフト (CLS) が削減され、ユーザエクスペリエンスの認識性が向上する。
CLSは、Googleがランキングアルゴリズムのシグナルとして5月から使用しているコアWebバイタルメトリックの1つだ。
Googleが検索で保持しているかなりの市場シェアは、おそらくGoogleの自己定義されたメトリックス全体でのパフォーマンスのレビューに向けてWebサイトを押し進めることが大きな要因だ。同じ理由で、Webパフォーマンスを最適化するためにCreate React AppからNext.jsに移行するアプリケーションの増加が報告されていることも説明できる。Next.js v11では、このような移行をサポートする実験的なcodemodが導入されている:
npx @next/codemod cra-to-next
Next.jsは、MITライセンスの下で利用可能なオープンソースソフトウェアだ。Next.jsの貢献ガイドラインと行動規範に従って、Next.js GitHubリポジトリを介した貢献を歓迎する。