Next.js 11 | Next.js

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は、SearchやMapsのような大規模なWebアプリケーションを構築する作業を通じて、チームやアプリケーションが拡大しても品質を維持するためにフレームワークが重要な役割を果たすことを証明しました。強力なデフォルトとセーフガードのシステムを活用することで、開発者は機能や製品により集中できるようになります。

本日、GoogleのWeb Platformsチームは、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以降、開発者体験の向上に注力してきました。 10.1と10.2では、スタートアップ時間を最大24%向上させ、React Fast Refreshによる変更の処理時間をさらに40%削減しました。Next.jsを最新の状態に保つだけで、これらの素晴らしいスピード改善が得られました。

Next.js 11には、Babelのさらなる最適化が含まれており、スタートアップ時間をさらに短縮します。webpack用のBabelローダーを新たに実装し、読み込みを最適化し、インメモリ構成キャッシュレイヤーを追加しました。実際には、開発者には変更はありませんが、最終的にはより高速な開発体験につながります。

スクリプトの最適化

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

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

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を選択することもできます。

デフォルト切り替えの背後にある技術的な選択肢の詳細については、Google ChromeチームのRFCとプリロードの課題を確認してください。

画像最適化

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

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

静的画像のwidthとheightを自動的に定義するには、画像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.dokyumento.jp/static/blog/next-11/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のロールアウトを拡大しました。本日、webpack 5をすべてのNext.jsアプリケーションのデフォルトにしました。これにより、さまざまな機能と改善が提供されます。

コミュニティと緊密に連携し、webpack 5へのスムーズな移行を確保しました。 webpack 5が有効な状態で、3,400以上の既存のNext.js統合テストがすべてのプルリクエストで実行されます。

カスタムwebpack構成をお使いのアプリケーションの場合は、webpack 5のアップグレードドキュメントに従うことをお勧めします。問題が発生した場合は、フィードバックをお寄せください。

CRA移行

過去6か月間、Next.jsが提供する多くの開発者体験やエンドユーザーパフォーマンスの改善を活用するために、Create React AppからNext.jsに移行するアプリケーションが増加しています。

開発者がアプリケーションをNext.jsに変換できるように、@next/codemodに新しいツールを導入しました。これにより、Create React AppアプリケーションをNext.js互換に自動変換できます。

このトランスフォームは、pages/ディレクトリを自動的に追加し、CSSインポートを適切な場所に移動します。また、Create React Appで使用される一部のパターンがNext.jsで機能することを保証する、Next.jsのCreate React App互換モードを有効にします。

新しいトランスフォームを活用することで、既存の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を導入するにあたり、Reactチームと緊密に協力しています。Next.js 11は、React 18アルファが使用されている場合にcreateRootを使用します。

コミュニティ

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

コミュニティが成長し続けていることを誇りに思います。過去6か月間だけでも、Next.jsのNPMダウンロード数は50%増加し、410万から620万になり、Alexaトップ10,000で使用されているホームページの数も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をサポートしています。