Backブログに戻る

Next.js 11

Next.js 11では、新しいコンフォーマンスシステムとパフォーマンス改善を通じて、最高の開発者体験を提供するという使命を継続しています。

Next.js Confで発表したように、Next.js 11では最高の開発者体験を提供するという使命を継続し、以下の機能を導入しました:

  • コンフォーマンス: 最適なUXをサポートするために慎重に設計されたソリューションを提供するシステム
  • パフォーマンス改善: コールドスタート時間をさらに最適化し、コーディングをより速く開始できるように
  • next/script: サードパーティスクリプトの読み込み優先度を自動的に設定してパフォーマンスを向上
  • next/image: 自動サイズ検出とブラーアッププレースホルダーのサポートにより、レイアウトシフトを減らし、よりスムーズな視覚的体験を実現
  • Webpack 5: すべての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などの大規模ウェブアプリケーションの構築を通じて、チームやアプリケーションが拡大しても品質を維持する上でフレームワークが重要な役割を果たすことを証明しました。強力なデフォルトと安全策のシステムを活用することで、開発者は機能や製品により集中できるようになります。

今日、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
.eslintrcファイルを作成し、ベースのNext.js ESLint設定を含めました。
 
./pages/about.js
7:9  警告: スタイルシートを手動で含めないでください。詳細: https://nextjs.org/docs/messages/no-css-tags.  @next/next/no-css-tags
10:7 警告: 外部同期スクリプトは禁止されています。詳細: https://nextjs.org/docs/messages/no-sync-scripts.  @next/next/no-sync-scripts
 
./pages/index.js
4:10 警告: /about/に移動するためにHTMLの<a>タグを使用しないでください。代わりに'next/link'のLinkを使用してください。詳細: https://nextjs.org/docs/messages/no-html-link-for-pages.  @next/next/no-html-link-for-pages
 
ESLintルールを無効にする必要がありますか？詳細はこちら: https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules
 
✨ 1.94秒で完了しました。

フレームワーク向けコンフォーマンスの詳細は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 Scriptコンポーネントは、サードパーティスクリプトの読み込み優先度を設定できる基本的な最適化で、開発者の時間を節約し、読み込みパフォーマンスを向上させます。

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

next/scriptでは、strategyプロパティを定義でき、Next.jsは自動的にそれらを優先して読み込みパフォーマンスを改善します:

  • beforeInteractive: ページがインタラクティブになる前にフェッチして実行する必要がある重要なスクリプト（ボット検出や同意管理など）向け。これらのスクリプトはサーバーから初期HTMLに注入され、自己バンドルされたJavaScriptが実行される前に実行されます。
  • afterInteractive (デフォルト): ページがインタラクティブになった後にフェッチして実行できるスクリプト（タグマネージャーや分析など）向け。これらのスクリプトはクライアントサイドで注入され、ハイドレーション後に実行されます。
  • lazyOnload: アイドル時間中にロードを待機できるスクリプト（チャットサポートやソーシャルメディアウィジェットなど）向け。
<Script
  src={url}
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

読み込み後にコードを実行することもできます。例えば、ユーザーが同意に回答した後にコードを実行するのを待つことができます:

<Script
  src={url} // 同意管理
  strategy="beforeInteractive"
  onLoad={() => {
    // 正常に読み込まれた場合、他のスクリプトを順番に読み込む
  }}
/>

また、Next.js 11ではデフォルトのスクリプト読み込み体験を、プリロードとasyncからdeferに変更しました。サードパーティスクリプトはしばしば、CSS、フォント、画像などのより優先度の高いリソースと競合します。これらのリソースや他のスクリプトに対する適切な順序を維持することは、開発者にとって不当な負担です。

デフォルトの読み込み戦略としてafterInteractiveを持つScriptコンポーネントを提供することで、開発者は最適なパフォーマンスのためのより良いデフォルトを手に入れ、必要に応じてbeforeInteractiveを選択する柔軟性も保持できます。

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

画像改善

コミュニティから最も要望の多かったnext/imageコンポーネントの2つの機能、累積レイアウトシフトの削減とよりスムーズな視覚的体験の作成について共有できることを嬉しく思います。

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

画像srcにimportキーワードを使用して、静的画像のwidthとheightを自動的に定義できるようになりました。

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

pages/index.js
import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // 画像をソースとしてインポートする場合、
    // `width`と`height`を定義する必要はありません。
    <Image src={author} alt="著者の写真" />
  );
}

画像プレースホルダー

next/imageは、空白から画像への移行を容易にし、特にインターネット接続が遅いユーザーの場合、知覚される読み込み時間を短縮するブラーアッププレースホルダーをサポートするようになりました。

ブラー付きプレースホルダーを使用するには、画像にplaceholder="blur"を追加します。

<Image src={author} alt="著者の写真" placeholder="blur" />

Next.jsはまた、バックエンドから提供されるカスタムblurDataURLを許可することで、動的画像のブラー処理もサポートします。例えば、サーバー上でblurha.shを生成できます。

<Image
  src="https://nextjs.org/static/blog/next-11/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="著者の写真"
  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のアップグレードドキュメントに従うことをお勧めします。問題が発生した場合は、フィードバックを共有してください。

Create React App移行

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

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

この変換は自動的に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は開発プロセス全体をウェブブラウザ内に置きます。これにより、ビルドステップなしで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 18の導入にあたり、Reactチームと緊密に協力しています。Next.js 11は、React 18 alphaが使用されている場合にcreateRootを使用します。

コミュニティ

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

コミュニティが成長し続けていることを誇りに思います。過去6ヶ月間だけで、NPMでのNext.jsのダウンロード数は4.1Mから6.2Mへと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, @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をサポートしています。