コンテンツへスキップ
ブログに戻る

2021年6月15日（火）

Next.js 11

投稿者
JJ Kasper
JJ Kasper@_ijjk
Shu Ding
Shu Ding@shuding_
Tim Neutkens
Tim Neutkens@timneutkens
Tobias Koppers
Tobias Koppers@wSokra

Next.js Confで発表したように、最高の開発者エクスペリエンスを生み出すという私たちのミッションは、Next.js 11で継続されます。Next.js 11では、以下の機能が搭載されています。

  • コンフォーマンンス：最適なUXをサポートするための、慎重に設計されたソリューションを提供するシステム。
  • パフォーマンスの向上：コールドスタート時間を改善するためのさらなる最適化により、より迅速にコーディングを開始できます。
  • next/script：サードパーティースクリプトの読み込みを自動的に優先順位付けして、パフォーマンスを向上させます。
  • next/image：レイアウトシフトを削減し、自動サイズ検出とブラーアッププレースホルダーのサポートにより、よりスムーズな視覚体験を実現します。
  • Webpack 5：すべてのNext.jsアプリケーションでデフォルトで有効になり、これらのメリットをすべてのNext.js開発者に提供します。
  • Create React App移行（実験的）：Create React Appを自動的にNext.jsと互換性のあるように変換します。
  • Next.js Live（プレビューリリース）：ブラウザで、チームとリアルタイムにコードを記述します。

npm i next@latest react@latest react-dom@latestを実行して、本日アップデートし、以下の移行ガイドを参照してください。

コンフォーマンンス

優れたツールとフレームワークの自動最適化があっても、サイト所有者やアプリ開発者は、パフォーマンス、セキュリティ、アクセシビリティなど、UX品質に関するトピックのエキスパートになるよう求められることがよくあります。機能が追加され、チームが拡大するにつれて、開発者は異なる考え方をする必要があります。

Googleは、検索やマップなどの大規模なWebアプリケーションを構築してきた経験から、フレームワークがチームとアプリケーションの規模拡大における品質維持に重要な役割を果たせることを証明しています。強力なデフォルトとセーフガードのシステムを活用することで、開発者は機能と製品により集中できます。

本日、GoogleのWebプラットフォームチームは、**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.dokyumento.jp/docs/messages/no-css-tags.  @next/next/no-css-tags
10:7  Warning: External synchronous scripts are forbidden. See: https://nextjs.dokyumento.jp/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.dokyumento.jp/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.dokyumento.jp/docs/pages/building-your-application/configuring/eslint#disabling-rules

✨  Done in 1.94s.

フレームワークのコンフォーマンンスの詳細については、Googleのブログをご覧ください。

パフォーマンスの向上

Next.js 10以降、Next.jsの開発者エクスペリエンスのさらなる改善に注力してきました。10.1と10.2では、起動時間を最大24％向上させ、React Fast Refreshによる変更の処理時間をさらに40％短縮しました。Next.jsを最新の状態に保つだけで、これらの素晴らしい速度の向上が得られます。

Next.js 11には、Babelへの別の最適化が含まれており、起動時間をさらに短縮します。Webpack用のBabelローダーのまったく新しい実装を作成し、読み込みを最適化し、インメモリ構成キャッシングレイヤーを追加しました。実際には、開発者にとって変更はありませんが、最終的にはより高速な開発エクスペリエンスにつながります。

スクリプトの最適化

新しいNext.jsスクリプトコンポーネントは、開発者がサードパーティースクリプトの読み込みの優先順位を設定して、開発者の時間を節約し、読み込みのパフォーマンスを向上させることができる基本的な最適化です。

ウェブサイトでは、分析、広告、カスタマーサポートウィジェット、同意管理などによくサードパーティが必要になります。ただし、これらのスクリプトは読み込みのパフォーマンスに大きな影響を与え、ユーザーエクスペリエンスを低下させる可能性があります。開発者は、最適な読み込みのためにアプリケーションに配置する場所を決定することに苦労することがよくあります。

next/scriptを使用すると、strategyプロパティを定義でき、Next.jsは自動的に優先順位を付けて読み込みのパフォーマンスを向上させます。

  • beforeInteractive：ボット検出や同意管理など、ページがインタラクティブになる前にフェッチして実行する必要がある重要なスクリプト。これらのスクリプトは、サーバーから初期HTMLに挿入され、自己バンドルされたJavaScriptが実行される前に実行されます。
  • afterInteractive（デフォルト）：タグマネージャーや分析など、ページがインタラクティブになった後にフェッチして実行できるスクリプト。これらのスクリプトはクライアント側で挿入され、ハイドレーション後に実行されます。
  • lazyOnload：チャットサポートやソーシャルメディアウィジェットなど、アイドル時間に読み込みを待つことができるスクリプト。
<Script
  src={url}
  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では、デフォルトのスクリプト読み込みエクスペリエンスをプリロードとasyncからdeferに変更しました。サードパーティースクリプトは、CSS、フォント、画像などの優先順位の高いリソースと競合することがよくあります。これらのリソースやその他のスクリプトとの適切なシーケンスを維持することは、開発者にとって過剰な負担となります。

afterInteractiveというデフォルトの読み込み戦略を持つスクリプトコンポーネントを提供することにより、開発者は最適なパフォーマンスのためのより優れたデフォルトを持ち、必要に応じてbeforeInteractiveを選択できます。

デフォルトの変更に関する技術的な選択の詳細については、RFCと、Google Chromeチームによるプリロードの課題をご覧ください。

画像の改善

コミュニティから最も要望の多かったnext/imageコンポーネントの2つの機能をご紹介します。これにより、累積レイアウトシフト（CLS）が軽減され、よりスムーズな視覚体験が実現します。

自動サイズ検出（ローカル画像）

静的画像のwidthとheightを自動的に定義するには、画像のsrcにimportキーワードを使用します。

例えば、組み込みのImageコンポーネントの使用は、さらに簡単になりました。

pages/index.js
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.dokyumento.jp/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からの移行

過去6ヶ月間で、Next.jsの多くの開発者エクスペリエンスとエンドユーザーのパフォーマンスの向上を活用するために、Create React AppからNext.jsに移行するアプリケーションが増加しています。Create React Appからの移行

開発者がアプリケーションをNext.jsに変換するのを支援するために、Create React Appアプリケーションを自動的にNext.jsと互換性のあるものに変換する新しいツール@next/codemodを導入しました。

変換により、pages/ディレクトリが自動的に追加され、CSSインポートが正しい場所に移動されます。また、Create React Appで使用されている一部のパターンがNext.jsで機能するように、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ブラウザに統合します。これにより、URLで瞬時にコラボレーションや共有が可能になり、ビルドステップなしで作業できます。開発者にとって、これはフィードバックループの高速化、ビルド待ち時間の短縮、ブラウザ内でのリアルタイムのピアプログラミングと編集を意味します。

Next.js LiveとVercelのリアルタイムコラボレーションエンジンの連携方法の詳細については、ドキュメントのNext.js Liveセクションをご覧ください。

アップグレードガイド

Next.js 11では、いくつかの破壊的変更が導入されていますが、ほとんどのユーザーには影響しません。これらのレガシー機能は、長年にわたり下位互換性のある方法で維持されており、一部はv4.0までさかのぼります。

これらの機能は、バンドルサイズを削減し、将来にわたってコードベースを維持可能にするために削除されました。バージョン10から11へのアップグレードの詳細については、アップグレードガイドをご覧ください。

Next.js 11では、最小Reactバージョンが17.0.2に更新されました。React 17のブログ投稿で詳細をご覧ください。また、Reactチームと緊密に協力してReact 18の導入にも取り組んでいます。Next.js 11は、React 18アルファ版が使用されている場合にcreateRootを使用します。

コミュニティ

Next.jsは、1,600人以上の個々の開発者、GoogleやFacebookなどの業界パートナー、そして私たちの開発チームの共同作業の成果です。

コミュニティの成長を嬉しく思っています。過去6ヶ月間だけで、NPMでのNext.jsのダウンロード数が410万件から620万件に50％増加し、Alexaトップ1万位以内のNext.jsを使用するホームページの数も50％増加しました。

このリリースは、以下の方々の貢献によって実現しました：@kahy9、@ljosberinn、@leerob、@kettanaito、@thomasboyt、@hussainanjar、@styfle、@devknoll、@LiuuY、@timneutkens、@housseindjirdeh、@PepijnSenders、@janicklas-ralph、@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で先行リリースされました。

  • 自動Webフォント最適化：フォントCSSをインライン化することでパフォーマンスが向上しました。
  • 高速化されたリフレッシュ：リフレッシュ時間が100ms～200ms短縮されました。
  • next/imageの改善：Apple Silicon（M1）サポート、さらにレイアウトとローダーオプションの追加。
  • Next.js Commerce Shopify統合：コンポーザブルなeコマースアプリのための柔軟なデータレイヤー。Next.js Commerceは現在、Shopify、BigCommerce、Saleor、Swell、Vendureをサポートしています。