Summary

Next.js 10 は画像最適化（next/image）、国際化ルーティング（i18n）、およびリアルユーザ計測（Next.js Speed Insights / Analytics）を中心に、パフォーマンスと開発体験を改善する大規模リリースです。React 17 対応、Fast Refresh の強化、サードパーティ CSS のインポート対応、getStaticPaths のブロッキングフォールバックなど、運用と移行を簡素化する機能が追加されています。

Key Points

• 画像最適化

  • 新しい next/image コンポーネントで自動 lazy-load、レスポンシブサイズ、画像の幅/高さ確保（CLS低減）、およびリクエスト時オンデマンドで WebP 等のモダンフォーマットを提供。
  • 外部ソース（CMS 等）からの画像も最適化され、ビルド時間は増えません。
  • 置き換え例: import Image from 'next/image' と <Image src="/img.jpg" width={400} height={400} /> を使用。

• 国際化（i18n）

  • next.config.js に i18n を設定してサブパス（/ja/...）またはドメインベースのルーティングを選択可能。
  • 例: module.exports = { i18n: { locales: ['en','nl'], defaultLocale: 'en' } }。
  • ルートに対する Accept-Language による自動検出と html の lang 属性付与をサポート。hreflang の管理は引き続き手動。

• パフォーマンス計測と運用

  • Next.js Speed Insights（Analytics）で実ユーザ計測を継続的に収集し、回帰やボトルネック（サードパーティスクリプト等）を特定可能。

• 互換性と開発者体験

  • React 17 対応。getStaticProps/getServerSideProps の編集時に Fast Refresh が効くよう改善。MDX でも Fast Refresh 対応。
  • @next/codemod CLI、next/link の as 非必須化、サードパーティ CSS の直接インポートなど移行を助けるツール群を提供。

Practical migration notes

• まず next/image に置き換えて LCP と CLS の改善を確認。
• next.config.js に i18n を追加してルーティング戦略（subpath/ domain）を決める。
• Speed Insights を導入して実ユーザのデータを収集し、影響の大きいリグレッションを優先的に解消。

短くまとめると、Next.js 10 は『画像最適化』『国際化ルーティング』『実ユーザ分析』を核に、既存アプリのパフォーマンス改善と運用のしやすさを同時に提供します。