Next.js 11 | Next.js

Next.js Confで発表した通り、最高の開発者体験を創造するという私たちの使命はNext.js 11で継続されます。主な機能は以下の通りです。

コンフォーマンス（Conformance）: 最適な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は、検索やマップのような大規模なウェブアプリケーションを構築する取り組みを通じて、チームやアプリケーションの規模が拡大するにつれて、フレームワークが品質維持において重要な役割を果たすことを証明しました。強力なデフォルト設定とセーフガードのシステムを活用することで、開発者は機能や製品により集中できるようになります。

本日、GoogleのWebプラットフォームチームは、Next.js向けコンフォーマンス（Conformance for Next.js）として彼らのシステムのオープンソース化を開始しました。

コンフォーマンス（Conformance）は、最適な読み込みと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であるScript Componentを提供することにより、開発者は最適なパフォーマンスのためのより良いデフォルト設定を持つことができ、必要に応じてbeforeInteractiveを選択する柔軟性も保持しています。

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

画像の改善

next/imageコンポーネントに対するコミュニティからの要望が最も多かった2つの機能、すなわちCumulative Layout Shift (累積レイアウトシフト)の軽減と、より滑らかな視覚体験の提供について共有できることを嬉しく思います。

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

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

例えば、組み込みの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/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の展開を拡大しました。本日、すべてのNext.jsアプリケーションでwebpack 5をデフォルトとし、これによりさまざまな機能と改善が提供されます。

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のインポートが正しい場所に移動されます。また、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は開発プロセス全体をウェブブラウザにもたらします。これにより、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ヶ月だけで、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-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, and @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をサポートしています。