Backブログに戻る

Next.js 11.1

Next.js 11.1では、重要なセキュリティパッチ、ES Modulesサポート、パフォーマンス改善、Rustベースのツーリング、 プリレンダリング時のデータ取得が2倍高速化などが導入されました！

Next.js 11.1では、スタック全体のビルドパフォーマンスを改善しています。主な機能は以下の通りです：

今すぐアップデートするには npm i next@latest を実行してください。

セキュリティパッチ

Next.jsチームはセキュリティ研究者や監査人と協力して脆弱性を防いでいます。RobinhoodのGabriel Benmergui氏によるpages/_error.jsのオープンリダイレクト調査と責任ある開示に感謝します。

報告された問題はユーザーに直接的な害はありませんでしたが、信頼できるドメインから攻撃者のドメインにリダイレクトするフィッシング攻撃を可能にする可能性がありました。Next.js 11.1ではこのオープンリダイレクトを防ぐパッチとセキュリティ回帰テストを実装しました。

詳細は公開されたCVEをご覧ください。アプリケーションのセキュリティを向上させるため、最新バージョンのNext.jsにアップグレードすることを推奨します。今後の責任ある開示報告は[email protected]までメールでお願いします。

注記: VercelでホストされているNext.jsアプリケーションはこの脆弱性の影響を受けません（したがって、Vercelで実行されているNext.jsアプリでは何もする必要はありません）。

ES Modulesサポート

Next.jsでは、入力モジュールと出力ターゲットの両方としてES Modulesの広範なサポートに取り組んでいます。Next.js 11.1から、実験的フラグを使用してES Modules（例：package.jsonで"type": "module"）を使用するnpmパッケージをインポートできるようになりました。

next.config.js
module.exports = {
  // CommonJSよりもES Modulesのロードを優先
  experimental: { esmExternals: true },
};

ES Modulesサポートには、CommonJSの以前のインポート動作をサポートするための後方互換性が含まれています。Next.js 12ではesmExternals: trueがデフォルトになります。新しいオプションを試して、改善の提案がある場合はGitHub Discussionsでフィードバックを残してください。

RustベースのSWC採用

Next.jsで使用されている2つのツールチェーン（個々のファイル用のBabelと出力バンドルの最小化用のTerser）を置き換えるため、Rustで書かれた超高速なJavaScriptおよびTypeScriptコンパイラSWCの統合に取り組んでいます。

BabelをSWCに置き換える一環として、Next.jsが使用するすべてのカスタムコード変換をRustで書かれたSWC変換に移植し、パフォーマンスを最大化しています。例えば、getStaticProps、getStaticPaths、getServerSideProps内の未使用コードのツリーシェイキングなどです。

Terserを置き換える一環として、SWCミニファイアがTerserと同様の出力を保ちながら、パフォーマンスとミニフィケーションの並列化を大幅に改善するように取り組んでいます。

初期テストでは、Babelを使用した以前のコード変換は約500msから約10msに、Terserによるコード最小化は約250msから約30msに短縮されました。全体として、これによりビルドが2倍高速化されました。

SWCの作成者DongYoon KangとParcelの貢献者Maia TeegardenがVercelのNext.jsチームに加わり、next devとnext buildのパフォーマンス改善に取り組むことを発表できることを嬉しく思います。SWC採用のさらなる結果は、次回の安定版リリースで共有する予定です。

パフォーマンス改善

ビルド＆データ取得

next buildを使用して多数のHTTPリクエストを行う場合、平均して約2倍のパフォーマンス改善がありました。例えば、Headless CMSからコンテンツを取得するためにgetStaticPropsとgetStaticPathsを使用している場合、ビルドが明らかに高速化するはずです。

Next.jsは自動的にnode-fetchをポリフィルし、デフォルトでHTTP Keep-Aliveを有効にします。外部ベンチマークによると、これによりプリレンダリングが約2倍高速化します。

特定のfetch()呼び出しでHTTP Keep-Aliveを無効にするには、agentオプションを追加できます：

import { Agent } from 'https';
const url = '<https://example.com>';
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

すべてのfetch()呼び出しをグローバルにオーバーライドするには、next.config.jsを使用できます：

next.config.js
module.exports = {
  httpAgentOptions: {
    keepAlive: false,
  },
};

ソースマップ

Next.jsアプリケーションにブラウザソースマップを含める場合、webpackアセットとソースマップ処理の最適化により、パフォーマンスコストが約70％、メモリコストが約67％削減されました。

これは、next.config.jsファイルでproductionBrowserSourceMaps: trueを設定しているNext.jsアプリケーションにのみ影響します。Next.js 11.1では、ソースマップが有効な場合、ビルド時間は11％しか増加しません。

また、Sentryと協力してSentry Next.jsプラグインを使用したソースマップのアップロードパフォーマンスを向上させました。

ESLintの改善

Next.js 11では、next lintを通じて組み込みのESLintサポートを導入しました。初期リリース以来、アプリケーションで一般的なミスを修正するのに役立つルールを追加し続けています。

デフォルトのアクセシビリティルール

デフォルトでより良いアクセシビリティルールが含まれるようになり、互いに一致しないARIAプロパティや存在しないARIA属性の使用に関する問題を防ぎます。これらのルールはデフォルトで警告を出します。

コミュニティ貢献者のJeffersonBledsoe氏がこれらのルールを追加してくれたことに感謝します。

一般的なタイポ

getStaticProps、getStaticPaths、getServerSidePropsの一般的なタイポについて、デフォルトで警告を出すようになりました。これにより、小さなタイポが原因でデータ取得が呼び出されないケースを防ぎます。例えば、getstaticpropsやgetStaticpropsは警告を表示します。

コミュニティ貢献者のkaykdm氏がこのルールを作成してくれたことに感謝します。

next/imageの改善

next/imageと組み込みの画像最適化についてコミュニティからのフィードバックを収集し、パフォーマンス、開発者体験、ユーザー体験の複数の改善を共有できることを嬉しく思います。

画像最適化

デフォルトでは、Next.jsはWebAssemblyを使用して画像最適化を実行します。これにより、Next.jsパッケージのインストール時間が大幅に短縮され、ポストインストールステップが不要になります。Next.js 11.1では、sharpをオプションでインストールでき、インストール時間が遅くなる代わりに、キャッシュされていない画像生成時間を最適化します。

WebAssemblyベースの画像オプティマイザは、Node.js 16でApple M1のようなARMチップをサポートするように更新されました。

組み込みの画像オプティマイザは、レスポンスボディの内容に基づいて外部画像のコンテンツタイプを自動的に検出するようになりました。これにより、レスポンスヘッダーがContent-Type: application/octet-streamの場合でも、AWS S3でホストされている画像をNext.jsが最適化できるようになります。

開発時のBlur Upプレースホルダーの遅延生成

next dev中にplaceholder="blur"を含む静的画像インポートは、遅延生成されるようになり、多くの静的画像インポートがあるアプリケーションの開発サーバー起動時間が改善されます：

pages/index.js
import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // この画像のプレースホルダーは開発中に遅延生成されます
    <Image src={author} alt="著者の写真" placeholder="blur" />
  );
}

その他の画像改善

  • 以前に読み込まれた画像は遅延読み込みされなくなりました: ページで以前に読み込まれた画像（クライアントナビゲーションまたはページの別の場所で読み込まれた場合）は、Next.jsが自動的に遅延読み込みをスキップし、画像を表示する前のちらつきを防ぎます。
  • next exportでのカスタム画像ローダーのサポート: next/imageはnext exportと任意のサードパーティ画像最適化サービスの使用をサポートするようになりました。カスタムloaderプロップをnext/imageに提供する場合は、next.config.jsでimages.loader: "custom"を設定できます。
  • 画像読み込み完了時の新しいイベント: ユーザーフィードバックに基づき、next/imageに新しいプロパティonLoadingCompleteを追加しました。これにより、画像が完全に読み込まれた時に呼び出されるコールバックを登録できます。
  • デフォルトの画像キャッシュTTL（Time to Live）の設定: next.config.jsでimages.minimumCacheTTLを設定し、最適化された画像のデフォルトキャッシュTTLを変更できるようになりました。可能であれば、URLに画像コンテンツハッシュが含まれるため、最大TTLを使用する静的画像importを使用することを推奨します。

コミュニティ

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

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

このリリースは以下の貢献者によってもたらされました： @abotsi, @adam-cowley, @afbarbaro, @akellbl4, @AndreVarandas, @andys-github, @angeloashmore, @apuyou, @arturmuller, @AryanBeezadhur, @atcastle, @borekb, @brandonchinn178, @breyed, @brijendravarma, @ctbarna, @ctjlewis, @darshkpatel, @delbaoliveira, @destruc7i0n, @devknoll, @enesakar, @enzoferey, @euess, @fabb, @gnbaron, @hiro0218, @housseindjirdeh, @huozhi, @ijjk, @JacobLey, @jameshoward, @jamsinclair, @janicklas-ralph, @jarvelov, @javivelasco, @jaybekster, @JeffersonBledsoe, @jflayhart, @johnrackles, @jviide, @karlsander, @kasipavankumar, @kaykdm, @kdy1, @kylemh, @leerob, @LetItRock, @lsndr, @lucleray, @m-abdelwahab, @mandarons, @markkaylor, @mastoj, @michalbundyra, @michielvangendt, @Munawwar, @mvasilkov, @NickCrews, @NickKelly1, @noahweingand, @noreiller, @nyedidikeke, @omasher, @orta, @pa-rang, @padmaia, @papaponmx, @PaulvdDool, @petermekhaeil, @phocks, @pranavp10, @qwertyforce, @raon0211, @reod, @rishabhpoddar, @roim, @Ryz0nd, @sa3dany, @sachinraja, @samrobbins85, @schoenwaldnils, @schultzp2020, @sedlukha, @sergioalvz, @shibe23, @smitssjors, @sohamsshah, @sokra, @stefanprobst, @stovmascript, @stuymedova, @styfle, @tanys123, @ThangHuuVu, @theostrahlen, @thomasmarshall, @tigger9flow, @timneutkens, @Timvdv, @tmcgann, @tomchen, @UniqueNL, @Vadorequest, @vitalybaev, @yunger7, @zackdotcomputer, @zeekrey