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

2021年8月11日（水）

Next.js 11.1

投稿者
DongYoon Kang
DongYoon Kang@kdy1dev
Jiachi Liu
Jiachi Liu@huozhi
...(以下同様の記述が続きます)

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以降、実験的なフラグを使用することで、npmパッケージを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採用

Next.jsでは、Rustで記述された超高速なJavaScriptおよびTypeScriptコンパイラであるSWCの統合に取り組んでいます。これにより、Next.jsで使用されている2つのツールチェーン（個々のファイルのバベル、出力バンドルの圧縮のためのTerser）が置き換えられます。

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

Terserの置き換えの一環として、SWCの圧縮器がTerserと同様の出力を生成しつつ、パフォーマンスと圧縮の並列化を大幅に向上させる取り組みを行っています。

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

DongYoon Kang（SWCの開発者）と、Maia Teegarden（Parcelへの貢献者）がVercelのNext.jsチームに参加し、`next dev`と`next build`のパフォーマンス向上に取り組んでいることを嬉しく思います。SWCの採用によるさらなる成果は、安定版リリース時に発表します。

パフォーマンス向上

ビルドとデータ取得

`next build`を使用し、多数のHTTPリクエストを行う場合、平均で**約2倍のパフォーマンス向上**を実現しました。たとえば、`getStaticProps`と`getStaticPaths`を使用してHeadless CMSからコンテンツを取得している場合、ビルドが大幅に高速化されます。

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の場合でも、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を使用できるようになりました。カスタムloaderプロップをnext/imageに提供する場合は、next.config.jsでimages.loader: "custom"を設定できます。
  • 画像の読み込みが完了したときの新しいイベント：ユーザーのフィードバックに基づいて、next/imageに新しいプロパティonLoadingCompleteを追加しました。これにより、画像が完全に読み込まれた後に呼び出されるコールバックを登録できます。
  • デフォルトの画像キャッシュTTL（存続時間）の設定：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