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

2021年8月11日 水曜日

Next.js 11.1

投稿者
DongYoon Kang
DongYoon Kang@kdy1dev
Jiachi Liu
Jiachi Liu@huozhi
JJ Kasper
JJ Kasper@_ijjk
Maia Teegarden
Maia Teegarden@padmaia
Shu Ding
Shu Ding@shuding_
Steven
Steven@styfle
Tim Neutkens
Tim Neutkens@timneutkens
Tobias Koppers
Tobias Koppers@wSokra

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

npm i next@latestを実行して今すぐ更新してください。

セキュリティパッチ

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

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

詳細については、公開CVEを参照してください。アプリケーション全体のセキュリティを向上させるため、最新バージョンのNext.jsへのアップグレードをお勧めします。今後の責任ある開示報告については、security@vercel.comまでメールでお問い合わせください。

注：VercelでホストされているNext.jsアプリケーションは、この脆弱性の影響を受けません（したがって、Vercelで実行中のNext.jsアプリに対応は不要です）。

ESモジュールサポート

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

next.config.js
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true },
};

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

RustベースのSWCの採用

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

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

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

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

SWCの作者であるDongYoon Kangと、Parcelの貢献者であるMaia TeegardenがVercelのNext.jsチームに加わり、next devとnext buildのパフォーマンス向上に取り組んでいることをお知らせします。SWC採用のさらなる成果については、次回の安定版リリースで共有する予定です。

パフォーマンスの改善

ビルドとデータフェッチ

next buildを使用し、多数のHTTPリクエストを行う際のパフォーマンスを平均で約2倍改善しました。例えば、ヘッドレスCMSからコンテンツをフェッチするためにgetStaticPropsやgetStaticPathsを使用している場合、ビルドが著しく高速化されるはずです。

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

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

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アプリケーションにブラウザソースマップを含める際のパフォーマンスコストが約70%削減され、メモリコストが約67%削減されました。これは、webpackのアセットとソースマップの処理における最適化によるものです。

これは、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である場合に、Next.jsはAWS S3でホストされている画像を最適化できます。

開発環境でのぼかしプレースホルダーの遅延生成

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

pages/index.js
import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // The placeholder for this image is lazy-generated during development
    <Image src={author} alt="Picture of the author" placeholder="blur" />
  );
}

その他の画像改善

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

コミュニティ

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