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

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 Modules サポート

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

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

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

RustベースのSWCの採用

Rustで書かれた超高速なJavaScriptおよびTypeScriptコンパイラである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倍に改善されました。たとえば、Headless 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 アプリケーションにブラウザソースマップを含める場合、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チップをサポートするように更新されました。

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