はじめに
2021/06/16、Next.js11がリリースされました🎉🎉🎉
この記事は、Next.js 11 リリースノートの 日本語訳です。
Next.js 11
Next.js 11では、最高の開発環境を提供するという使命のもと、次のような特徴を備えています。
- Conformance: 最適なUXをサポートするために慎重に作られたソリューションを提供するシステム。
- パフォーマンスの向上: コールドスタートアップの時間を短縮するための最適化により、より早くコーディングを開始できます。
-
next/script: サードパーティ製スクリプトの読み込みを自動的に優先させ、パフォーマンスを向上させます。 -
next/image: サイズの自動検出とブラーアッププレースホルダーのサポートにより、レイアウトのずれを減らし、よりスムーズなビジュアルエクスペリエンスを実現します。 - Webpack 5: すべてのNext.jsアプリケーションでデフォルトで有効になり、すべてのNext.js開発者にこれらのメリットがもたらされます。
- Create React App Migration（実験的）: Create React AppをNext.jsと互換性のあるものに自動的に変換します。
- Next.js Live（プレビューリリース）: ブラウザ上で、チームと一緒に、リアルタイムにコードを書くことができます。
npm i next@latest react@latest react-dom@latest を実行し、以下の移行ガイドを参照して、本日アップデートしてください。
Conformance
優れたツールやフレームワークによる自動最適化機能があっても、サイトオーナーやアプリ開発者は、パフォーマンス、セキュリティ、アクセシビリティなどのUX品質に関する専門家になることを求められることがよくあります。機能が追加され、チームの規模が大きくなるにつれて、開発者はこれまでとは異なる考え方をする必要があります。
Googleは、検索やマップなどの大規模なWebアプリケーションの構築を通じて、チームやアプリケーションの規模が大きくなっても品質を維持するためにフレームワークが重要な役割を果たすことを証明してきました。Google は、強力な標準化とセーフガードのシステムを活用することで、開発者が機能や製品に集中できるようにしています。
本日、GoogleのWebプラットフォームチームは、Conformance for Next.jsを用いたシステムのオープンソース化を開始しました。
Conformance for Next.jsは、最適なロードとCore Web Vitalsをサポートするために慎重に作成されたソリューションとルールを提供するシステムで、セキュリティやアクセシビリティなどの他の品質面をサポートする機能がさらに追加される予定です。これらのソリューションにより、チームは最適なローディングパフォーマンスのための最新ルールをすべて覚える必要がなくなり、同時にアプリケーションに適した選択を行う柔軟性も得られます。
Next.js 11は、パフォーマンスリサーチに裏付けられた多くの基本的な最適化機能に加えて、ESLintをサポートしています。これにより、開発中にフレームワーク固有の問題を簡単に検出し、チームにガイドラインを設定することで、規模が拡大してもベストプラクティスを確保することができます。
ESLintを使用するには、Next.js 11にアップグレードした後、npx next lintを実行します。ESLintの統合は、新規および既存のNext.jsアプリケーションで機能し、開発者がより良いアプリケーションを構築するための新しいルールを提供します。
$ npx next lint
We created the .eslintrc file for you and included the base Next.js ESLint configuration.
./pages/about.js
7:9 Warning: Do not include stylesheets manually. See: https://nextjs.org/docs/messages/no-css-tags. @next/next/no-css-tags
10:7 Warning: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts. @next/next/no-sync-scripts
./pages/index.js
4:10 Warning: Do not use the HTML <a> tag to navigate to /about/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages. @next/next/no-html-link-for-pages
Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
✨ Done in 1.94s.
Conformance for frameworksの詳細は、Googleのブログをご覧ください。
パフォーマンスの向上
Next.js 10以降、私たちはNext.jsの開発者体験をさらに向上させることにこだわってきました。10.1と10.2では、起動時間を最大24%改善し、React Fast Refreshによる変更の処理時間をさらに40%短縮しました。Next.jsをアップデートしておくだけで、このような驚くべきスピード改善が得られるのです。
Next.js 11では、起動時間をさらに短縮するために、Babelに別の最適化が施されています。webpack用のBabelローダーを新たに実装し、ロードの最適化とインメモリのコンフィグキャッシングレイヤーを追加しました。実際には、開発者にとっては何の変化もありませんが、最終的には開発の高速化を意味します。
Script Optimization
新しいNext.js Script Componentは、開発者がサードパーティのスクリプトの読み込み優先度を設定することで、開発者の時間を節約し、読み込みパフォーマンスを向上させることができる基礎的な最適化です。
Webサイトでは、分析、広告、カスタマーサポートウィジェット、同意管理などのためにサードパーティを必要とすることがよくあります。しかし、これらのスクリプトは、読み込みパフォーマンスが重くなりがちで、ユーザーエクスペリエンスを低下させる原因となります。開発者は、最適なロードを実現するために、アプリケーションのどこにこれらのスクリプトを配置すべきか、悩むことがよくあります。
next/scriptでは、strategyプロパティを定義すれば、Next.jsが自動的に優先順位をつけて読み込みパフォーマンスを向上させます。
-
beforeInteractive: ボット検出や同意管理など、ページがインタラクティブになる前にフェッチして実行する必要がある重要なスクリプト用です。これらのスクリプトは、サーバーからの最初のHTMLに注入され、セルフバンドルされたJavaScriptが実行される前に実行されます。 -
afterInteractive（デフォルト）: タグマネージャやアナリティクスなど、ページがインタラクティブになった後にフェッチして実行できるスクリプトです。これらのスクリプトは、クライアントサイドに注入され、ハイドレーションの後に実行されます。 -
lazyOnload: チャットサポートやソーシャルメディアのウィジェットなど、アイドルタイムにロードを待つことができるスクリプトです。
<Script
src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"
strategy="beforeInteractive" // lazyOnload, afterInteractive
/>
読み込み後にコードを実行することもできます。例えば、ユーザーが同意の返事をした後までコードの実行を待つことができます。
<Script
src={url} // consent mangagement
strategy="beforeInteractive"
onLoad={() => {
// If loaded successfully, then you can load other scripts in sequence
}}
/>
また、Next.js 11では、デフォルトのスクリプトの読み込み方法を、preloadingとasyncからdeferに変更しました。サードパーティのスクリプトは、CSS、フォント、画像など、優先度の高いリソースと競合することがよくあります。これらのリソースや他のスクリプトとの相対的な順序を適切に保つことは、開発者にとって過度な負担となります。
スクリプトコンポーネントにデフォルトのローディング戦略として afterInteractive を設定することで、開発者は最適なパフォーマンスを得るためのより良いデフォルト値を得ることができ、必要に応じて beforeInteractive を選択することもできます。
デフォルトの切り替えに関する技術的な選択肢については、Google ChromeチームによるRFCとプリロードに関する課題をご覧ください。
画像の改善
コミュニティからの要望が多かったnext/imageコンポーネントの2つの機能をご紹介します。Cumulative Layout Shiftを減らし、よりスムーズなビジュアルエクスペリエンスを実現します。
自動サイズ検出（ローカル画像)
画像のsrcにimportキーワードを使用すると、静的な画像の幅と高さを自動的に定義できます。
例えば、内蔵されている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" />
)
}
イメージプレースホルダー
next/imageにぼかしの入ったプレースホルダーが追加され、空白から画像への移行が容易になりました。
ぼかしたプレースホルダーを使用するには、画像にplaceholder="blur "を追加します。
<Image src={author} alt="Picture of the author" placeholder="blur" />
Next.jsは、バックエンドから提供されるカスタムblurDataURLを提供できるようにすることで、動的な画像のぼかしにも対応しています。たとえば、サーバー上でblurha.shを生成します。
<Image
src="https://nextjs.org/static/images/learn.png"
blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
alt="Picture of the author"
placeholder="blur"
/>
webpack 5
Next.js 10.2では、next.config.jsに独自のwebpack設定をしていないすべてのアプリケーションに対して、webpack 5の展開を拡大しました。本日、すべてのNext.jsアプリケーションのデフォルトをwebpack 5にすることで、さまざまな機能や改善が提供されます。
コミュニティと緊密に連携し、webpack 5へのスムーズな移行を実現しました。webpack 5を有効にしたプルリクエストでは、3,400以上の既存のNext.js統合テストが実行されます。
アプリケーションがカスタムのwebpack設定をしている場合は、webpack 5のアップグレードドキュメントに従うことをお勧めします。何か問題が発生した場合は、フィードバックをお寄せください。
CRAマイグレーション
この半年間で、Create React AppからNext.jsへ移行し、Next.jsが提供する開発者体験やエンドユーザーのパフォーマンス向上の多くを活用するアプリケーションが増加しています。
開発者がアプリケーションをNext.jsに変換するのを支援するために、Create React AppアプリケーションをNext.js互換に自動的に変換する新しいツールを@next/codemodに導入しました。
この変換では、pages/ディレクトリが自動的に追加され、CSSインポートが適切な場所に移動します。また、Next.jsのCreate React App互換モードが有効になり、Create React Appで使用されているいくつかのパターンがNext.jsで動作するようになります。
この新しい変換機能を利用することで、既存のCreate React Appアプリケーションの機能を維持しながら、Next.jsを段階的に導入することができます。
Create React Appプロジェクトの移行を開始するには、次のコマンドを使用します。
npx @next/codemod cra-to-next
この機能は現在実験的なもので、フィードバックがあればこのディスカッションで共有してください。
Next.js Live (プレビューリリース)
Next.js Liveは、開発をより速く、より楽しくするだけでなく、重要なこととして、組織全体をより包括的にするという私たちのミッションを継続するものです。ServiceWorker、WebAssembly、ES Modulesといった最先端のテクノロジーを活用することで、Next.js Liveは開発プロセス全体をWebブラウザ上で行うことができます。Next.js Liveは、ServiceWorkerやWebAssembly、ESモジュールなどの最先端技術を活用し、開発プロセス全体をWebブラウザ上で実現します。開発者にとっては、フィードバックループが速くなり、ビルドを待つ時間が短縮され、ブラウザ上でリアルタイムにピアプログラミングや編集ができるようになりました。
Next.js Liveの詳細と、Vercelのリアルタイムコラボレーションエンジンとの組み合わせについては、こちらをご覧ください。
アップグレードガイド
Next.js 11では、大多数のユーザーには影響のない、いくつかの画期的な変更が導入されています。これらのレガシー機能は何年にもわたって後方互換性を維持してきたもので、中にはv4.0までさかのぼるものもあります。
これらの機能が削除されたのは、バンドルのサイズを小さくし、将来にわたってコードベースのメンテナンス性を確保するためです。バージョン10から11へのアップグレードの詳細については、アップグレードガイドをご覧ください。
Next.js 11では、Reactの最小バージョンが17.0.2に更新されました。詳しくは、React 17のブログポストをご覧ください。また、ReactチームがReact 18を導入するにあたり、Reactチームと緊密に連携しています。Next.js 11では、React 18 alphaが使用されている場合、createRootを使用します。
コミュニティ
Next.jsは、1,600人を超える個人の開発者、GoogleやFacebookなどの業界パートナー、そしてコアチームの努力の賜物です。
このコミュニティが成長し続けていることを誇りに思います。この6ヶ月間だけでも、NPMにおけるNext.jsのダウンロード数は410万件から620万件へと50%増加し、Alexaのトップ10,000に含まれるNext.jsを使用したホームページの数も50%増加しています。
このリリースは、以下の方々のご協力により実現しました。このリリースは、@kahy9, @ljosberinn, @leerob, @kettanaito, @thomasboyt, @hussainanjar, @styfle, @devknoll, @LiuuY, @timneutkens, @housseindjirdeh, @PepijnSenders, @janicklas-alph, @payapula, @tmtk75, @ijjk, @hiramhuang, @daku10, @atcastle, @matamatanot, @pelhage, @Lukazovic, @Mzaien, @gleich, @geshan, @Munawwar, @ykzts, @vitalybaev, @mottox2, @vvo, @chrisneven, @turneand, @d3lm, @akellbl4, @sokra, @johnjago, @alicanyildirim, @sanathusk, @valse, @samrobbins85, @SamVerschueren, @ademilter, @ctjlewis, @brandondc741, @eltociear, @martpie, @kasipavankumar, @joecohens, @alexbrazier, @jamsinclair, @fabianishere, @rokinsky, @msidqi, @rubensdemelo, @Simply007, @bradlc, @SinimaWath, @rgabs, @darshkpatel, @sumanthratna, @shuding, @prophet1996, @Joonpark13, @tremby, @stefanprobst, @dopt, @rishabhpoddar, @aydinkn, @ErfanMirzapour, @tubbo, @frontendtony, @eric-burel, @iker-barriocanal, @eps1lon, @Gigiz, @mplis, @HaNdTriX, @jigsawye.
以下の機能は、Next.jsのConfで言及されていましたが、バージョン10.1と10.2で早期に出荷されました。
- 自動ウェブフォント最適化: フォントのCSSをインライン化することでパフォーマンスを向上させました。
- リフレッシュの高速化：100msから200msの高速化を実現しました。
-
next/image: Apple Silicon (M1)への対応に加え、レイアウトやローダーの選択肢が増えました。 - Next.js Commerce Shopifyの統合: コンポーザブルなeコマースアプリのための柔軟なデータレイヤー。Next.js Commerceは現在、Shopify、BigCommerce、Saleor、Swell、Vendureをサポートしています。