Next.js 11.1

claudejamodel: claude-sonnet-4-20250514

Next.js 11.1

2021年8月11日（水）

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

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

セキュリティパッチ：潜在的なオープンリダイレクトを防ぐ重要なアップデート
ES Modules サポート：実験的フラグで今すぐ有効化可能
Rustベースのツール：SWC統合によりJSツール（BabelとTerser）を置き換え
高速データフェッチング：プリレンダリング時のHTTP keep-aliveにより2倍高速化
高速ソースマップ：ソースマップ使用時に70%高速なビルドと67%少ないメモリ使用量
ESLint統合の改善：よりアクセシブルなデフォルトとタイポのリンティング
next/image の改善：オプションのSharp使用、next exportのより良いサポート

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を使用するnpmパッケージ（例：package.json で "type": "module" を指定）をインポートできるようになりました。

// next.config.js
module.exports = {
  // CommonJSよりもES Modulesの読み込みを優先
  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倍のパフォーマンス改善を実現しました。例えば、getStaticProps と getStaticPaths を使用してヘッドレス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アプリケーションでブラウザソースマップを含める際のパフォーマンスコストが約70%削減され、webpackアセットとソースマップ処理の最適化により、メモリコストが約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属性の使用に関する問題を防ぎます。これらのルールはデフォルトで警告を表示します。

aria-props
aria-proptypes
aria-unsupported-elements
role-has-required-aria-props
role-supports-aria-props

これらのルールを追加してくれたコミュニティ貢献者の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が最適化できるようになります。

開発時のブラープレースホルダーの遅延生成

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="Picture of the author"
      placeholder="blur"
    />
  );
}

その他の画像改善

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

Summary

Summary

Key Points

Translations

Next.js 11.1

セキュリティパッチ

ES Modules サポート

Rustベースの SWC の採用

パフォーマンスの改善

ビルドとデータフェッチング

ソースマップ

ESLint の改善

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

よくあるタイポ

next/image の改善

画像最適化

開発時のブラープレースホルダーの遅延生成

その他の画像改善

コミュニティ