Summary

Next.js 10.1 がリリースされました。主な改善は Fast Refresh の高速化、インストールサイズと依存の削減、next/image の WebAssembly 化（Apple Silicon 対応）とレイアウト/カスタムローダー追加、Shopify を含む Next.js Commerce のプロバイダ対応、そして開発体験向上のための各種フラグやドキュメント強化です。

Key Points

• Fast Refresh が平均で3x高速に（編集反映が約200ms短縮）。更に早くするには Webpack 5 を opt-in。例: module.exports = { future: { webpack5: true } }
• インストール改善: サイズ約96.5MB → 39.9MB（≈58%削減）、依存数424 → 187（≈56%削減）。CI／ローカルの初期セットアップが高速化。
• next/image の改善:
  • 画像最適化を WebAssembly に移行し Apple Silicon（M1）をサポート。
  • 新しい layout オプション: fill, fixed, responsive, intrinsic と objectFit。
  • 任意の CDN/プロバイダで使えるカスタム loader プロップを追加。
• Next.js Commerce: Shopify を含むプロバイダ非依存の UI と Features API で柔軟な e-commerce 構築が可能。
• カスタム 500 ページがサポート（pages/500.js を追加してブランド表示可能）。
• PostCSS と Webpack 5 向けのキャッシュ改善フラグ: future.strictPostcssConfiguration: true。
• TypeScript: tsconfig.json の extends をサポート（大規模プロジェクトの共通設定を継承可能）。
• プレビュー検出: useRouter().isPreview でプレビュー時のみコンポーネントを表示可能。
• ルーティング: router.push / router.replace が自動でトップへスクロール（scroll オプションで無効化可）。
• ドキュメント: インクリメンタル導入、Gatsby/CRA からの移行ガイド、Docker デプロイ等の改善。

Upgrade / Action items

• Webpack 5 を試す場合は next.config.js に future.webpack5 = true を追加して互換性テストを実施。
• カスタム画像プロバイダを使用する場合は loader を実装して next/image を置き換え検証。
• CI キャッシュや PostCSS 関連のパフォーマンス改善は strictPostcssConfiguration フラグで検証。
• 既存のエラーページや TypeScript 設定を見直し、pages/500.js と tsconfig の extends を活用。

参考: next/image のレイアウトやカスタムローダー、Preview Mode、Next.js Commerce のドキュメントを確認してください。