DocsDigest
Back to listLanguage: JA
ClaudeNext.jsJun 15, 2021, 4:00 PM

Next.js 11

A condensed section focused on the key takeaways first.

Original Post
OpenAIClaude

Quick Digest

Summary

A condensed section focused on the key takeaways first.

claudeenmodel: claude-sonnet-4-20250514

Next.js 11 Release - Enhanced Performance and Developer Experience

nextjswebpack5performanceeslintconformancereactimage-optimizationscript-optimization

Key Points

  • Google Conformance system with ESLint integration
  • Enhanced script and image components with automatic optimizations
  • Webpack 5 enabled by default for all applications

Summary

Next.js 11 introduces significant improvements focused on developer experience, performance optimization, and code quality. The release includes Google's Conformance system, enhanced script and image components, and webpack 5 as the default bundler.

Key Points

  • Conformance System: Integration with Google's system providing ESLint rules and performance guidelines for optimal UX and Core Web Vitals
  • Performance Improvements: Enhanced Babel loader with in-memory caching for faster startup times, building on previous 24% and 40% improvements
  • Script Optimization: New next/script component with loading strategies (beforeInteractive, afterInteractive, lazyOnload) for better third-party script management
  • Image Enhancements: Automatic size detection for local images and blur-up placeholders to reduce Cumulative Layout Shift
  • Webpack 5 Default: Now enabled for all applications, providing modern bundling features and improvements
  • CRA Migration Tool: Experimental codemod to automatically convert Create React App projects to Next.js
  • Next.js Live: Preview release enabling browser-based development with real-time collaboration using ServiceWorker and WebAssembly
  • Breaking Changes: Minimum React version updated to 17.0.2, removal of legacy features for better maintainability

Full Translation

Translations

A translation section that keeps the flow of the original article.

claudejamodel: claude-sonnet-4-20250514

Next.js 11

Next.js 11

2021年6月15日（火）

投稿者：JJ Kasper @ ijjk、Shu Ding @ shuding、Tim Neutkens @ timneutkens、Tobias Koppers @ wSokra

Next.js Confで発表したように、最高の開発者体験を提供するという私たちのミッションは、Next.js 11で継続されます。以下の機能を搭載しています：

  • Conformance：最適なUXをサポートするために慎重に作られたソリューションを提供するシステム
  • パフォーマンスの向上：コールドスタートアップ時間をさらに最適化し、より速くコーディングを開始できます
  • next/script：サードパーティスクリプトの読み込みを自動的に優先順位付けしてパフォーマンスを向上
  • next/image：自動サイズ検出とぼかしプレースホルダーのサポートにより、レイアウトシフトを削減し、よりスムーズな視覚体験を実現
  • Webpack 5：すべてのNext.jsアプリケーションでデフォルトで有効になり、すべてのNext.js開発者にこれらの利点をもたらします
  • Create React App Migration（実験的）：Create React AppをNext.js互換に自動変換
  • Next.js Live（プレビューリリース）：ブラウザ内でチームとリアルタイムでコーディング

今すぐ npm i next@latest react@latest react-dom@latest を実行してアップデートし、以下の移行ガイドを参照してください。

Conformance

優れたツールとフレームワークの自動最適化があっても、サイト所有者やアプリ開発者は、パフォーマンス、セキュリティ、アクセシビリティなどのUX品質トピックの専門家になることを求められることがよくあります。機能が追加され、チームが拡大するにつれて、開発者は異なる考え方をする必要があります。

Googleは、SearchやMapsなどの大規模なWebアプリケーションの構築作業を通じて、チームとアプリケーションが拡大する際に品質を維持する上で、フレームワークが重要な役割を果たすことを証明しました。強力なデフォルトとセーフガードのシステムを活用することで、開発者が機能と製品により集中できるようになります。

今日、GoogleのWeb Platformsチームは、Next.js用のConformanceでシステムのオープンソース化を開始しました。Conformanceは、最適な読み込みとCore Web Vitalsをサポートするために慎重に作られたソリューションとルールを提供するシステムで、セキュリティやアクセシビリティなどの他の品質面をサポートするための追加機能も予定されています。

これらのソリューションにより、チームは最適な読み込みパフォーマンスのための最新ルールをすべて記憶する必要がなくなり、アプリケーションに適した選択を行う柔軟性も維持できます。

パフォーマンス研究に裏付けられた多くの基盤的最適化とともに、Next.js 11では、開発中にフレームワーク固有の問題をより簡単に発見し、拡大時でもベストプラクティスを確保するためのガイドラインをチームに設定できるよう、ESLintをすぐに使えるようサポートしています。

ESLintを開始するには、Next.js 11にアップグレード後に npx next lint を実行してください。ESLint統合は新規および既存のNext.jsアプリケーションで動作し、開発者がより良いアプリケーションを構築するのに役立つ新しいルールセットを提供します。

$ npx next lint

.eslintrcファイルを作成し、基本のNext.js ESLint設定を含めました。

./pages/about.js
7:9  Warning: スタイルシートを手動で含めないでください。参照: https://nextjs.org/docs/messages/no-css-tags. @next/next/no-css-tags

10:7  Warning: 外部同期スクリプトは禁止されています。参照: https://nextjs.org/docs/messages/no-sync-scripts. @next/next/no-sync-scripts

./pages/index.js
4:10  Warning: /about/への移動にHTML <a> タグを使用しないでください。代わりに'next/link'のLinkを使用してください。参照: https://nextjs.org/docs/messages/no-html-link-for-pages. @next/next/no-html-link-for-pages

ESLintルールを無効にする必要がありますか？詳細はこちら: https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules

✨ 1.94秒で完了。

フレームワーク用のConformanceについて詳しくは、Googleのブログをご覧ください。

パフォーマンスの向上

Next.js 10以降、Next.jsの開発者体験をさらに向上させることに取り組んできました。10.1と10.2では、起動時間を最大24%改善し、React Fast Refreshによる変更の処理時間をさらに40%短縮しました。Next.jsを最新に保つだけで、これらの素晴らしい速度向上を得ることができます。

Next.js 11では、起動時間をさらに短縮するためのBabelの最適化が含まれています。webpack用のBabelローダーの全く新しい実装を作成し、読み込みを最適化し、インメモリ設定キャッシュレイヤーを追加しました。実際には、開発者にとって変更はありませんが、最終的にはより高速な開発体験を意味します。

スクリプト最適化

新しいNext.js Script Componentは、開発者がサードパーティスクリプトの読み込み優先度を設定して開発時間を節約し、読み込みパフォーマンスを向上させることができる基盤的な最適化です。

Webサイトでは、アナリティクス、広告、カスタマーサポートウィジェット、同意管理などのためにサードパーティが必要になることがよくあります。しかし、これらのスクリプトは読み込みパフォーマンスに重い負荷をかけ、ユーザー体験を低下させる傾向があります。開発者は、最適な読み込みのためにアプリケーションのどこに配置するかを決めるのに苦労することがよくあります。

next/scriptでは、strategyプロパティを定義でき、Next.jsが自動的に優先順位を付けて読み込みパフォーマンスを向上させます：

  • beforeInteractive：ボット検出や同意管理など、ページがインタラクティブになる前に取得・実行する必要がある重要なスクリプト用。これらのスクリプトはサーバーから初期HTMLに注入され、自己バンドルJavaScriptが実行される前に実行されます。
  • afterInteractive（デフォルト）：タグマネージャーやアナリティクスなど、ページがインタラクティブになった後に取得・実行できるスクリプト用。これらのスクリプトはクライアント側で注入され、ハイドレーション後に実行されます。
  • lazyOnload：チャットサポートやソーシャルメディアウィジェットなど、アイドル時間中の読み込みを待つことができるスクリプト用。
<Script
  src={url}
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

読み込み後にコードを実行することもできます。例えば、ユーザーが同意に答えるまでコードの実行を待つことができます：

<Script
  src={url} // 同意管理
  strategy="beforeInteractive"
  onLoad={() => {
    // 正常に読み込まれた場合、他のスクリプトを順次読み込むことができます
  }}
/>

また、Next.js 11では、デフォルトのスクリプト読み込み体験をpreloadとasyncからdeferに変更しました。サードパーティスクリプトは、CSS、フォント、画像などのより高い優先度のリソースと競合することがよくあります。これらのリソースや他のスクリプトとの適切な順序を維持することは、開発者にとって不当な負担です。

afterInteractiveのデフォルト読み込み戦略を持つScript Componentを提供することで、開発者は最適なパフォーマンスのためのより良いデフォルトを得られ、必要に応じてbeforeInteractiveを選択する能力も維持できます。

デフォルトの切り替えの背後にある技術的選択について詳しくは、RFCとGoogle Chromeチームからのpreloadの課題をご確認ください。

画像の改善

next/imageコンポーネントに対するコミュニティからの最も要望の多かった2つの機能、Cumulative Layout Shiftの削減とよりスムーズな視覚体験の実現を共有できることを嬉しく思います。

自動サイズ検出（ローカル画像）

画像srcにimportキーワードを使用して、静的画像の幅と高さを自動的に定義します。例えば、組み込みのImageコンポーネントの使用がさらに簡単になりました：

// pages/index.js
import Image from 'next/image';
import author from '../public/me.png';

export default function Home() {
  return (
    // 画像をソースとしてインポートする場合、
    // `width`と`height`を定義する必要はありません。
    <Image
      src={author}
      alt="Picture of the author"
    />
  );
}

画像プレースホルダー

next/imageは、空白スペースから画像への移行を緩和し、特に低速なインターネット接続のユーザーにとって知覚される読み込み時間を短縮するために、ぼかしプレースホルダーをサポートするようになりました。

ぼかしプレースホルダーを使用するには、画像にplaceholder="blur"を追加してください。

<Image
  src={author}
  alt="Picture of the author"
  placeholder="blur"
/>

Next.jsは、バックエンドによって提供されるカスタムblurDataURLを提供することで、動的画像のぼかしもサポートしています。例えば、サーバーでblurha.shを生成できます。

<Image
  src="https://nextjs.org/static/blog/next-11/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="Picture of the author"
  placeholder="blur"
/>

Webpack 5

Next.js 10.2では、next.config.jsにカスタムwebpack設定がないすべてのアプリケーションにwebpack 5の展開を拡大しました。今日、すべてのNext.jsアプリケーションでwebpack 5をデフォルトにしており、これにより様々な機能と改善が提供されます。

webpack 5へのスムーズな移行を確保するためにコミュニティと密接に協力し、3,400を超える既存のNext.js統合テストがwebpack 5を有効にしてすべてのプルリクエストで実行されています。

アプリケーションにカスタムwebpack設定がある場合は、webpack 5のアップグレードドキュメントに従うことをお勧めします。問題が発生した場合は、フィードバックを共有してください。

CRA Migration

過去6か月間で、Next.jsが提供する多くの開発者体験とエンドユーザーパフォーマンスの改善を活用するために、Create React AppからNext.jsに移行するアプリケーションの増加を見てきました。

開発者がアプリケーションをNext.jsに変換するのを支援するため、Create React AppアプリケーションをNext.js互換に自動変換する新しいツールを@next/codemodに導入しました。

この変換は自動的にpages/ディレクトリを追加し、CSSインポートを適切な場所に移動します。また、Create React Appで使用される一部のパターンがNext.jsで動作することを保証するCreate React App互換モードをNext.jsで有効にします。

新しい変換を活用することで、既存のCreate React Appアプリケーションの機能を維持しながら、段階的にNext.jsを採用できます。

Create React Appプロジェクトの移行を開始するには、次のコマンドを使用してください：

npx @next/codemod cra-to-next

この機能は現在実験的です。この議論でフィードバックを共有してください。

Next.js Live（プレビューリリース）

Next.js Liveは、開発をより高速で楽しいものにするだけでなく、重要なことに組織全体により包括的にするという私たちのミッションの継続です。

ServiceWorker、WebAssembly、ES Modulesなどの最先端技術を活用することで、Next.js LiveはWebブラウザ内に開発プロセス全体を配置します。これにより、ビルドステップなしでURLで瞬時にコラボレーションと共有を行うなどの可能性が開かれます。

開発者にとって、これはより高速なフィードバックループ、ビルドを待つ時間の短縮、ブラウザ内でのリアルタイムペアプログラミングと編集を意味します。

Next.js LiveとVercelのリアルタイムコラボレーションエンジンとの組み合わせについて詳しくは、ドキュメントのNext.js Liveセクションをご覧ください。

アップグレードガイド

Next.js 11では、大多数のユーザーに影響しないはずのいくつかの破壊的変更が導入されています。これらのレガシー機能は、v4.0まで遡るものもあり、何年もの間後方互換性のある方法で維持されてきました。これらの機能は、バンドルサイズを削減し、将来のためにコードベースを保守可能にするために削除されました。

バージョン10から11へのアップグレードについて詳しくは、アップグレードガイドをご覧ください。

Next.js 11では、最小React版が17.0.2に更新されました。詳細については、React 17ブログ投稿をご覧ください。

また、React 18を導入するReactチームと密接に協力しています。Next.js 11は、React 18 alphaが使用されている場合にcreateRootを使用します。

コミュニティ

Next.jsは、1,600人を超える個人開発者、GoogleやFacebookなどの業界パートナー、そして私たちのコアチームの共同作業の結果です。そのコミュニティが成長し続けているのを見ることを誇りに思います。過去6か月だけでも、50%の増加を見てきました