Summary

Next.js 5.1 が公開されました。主な改善はページ解決の大幅な高速化（約102x）、クライアント/サーバで使えるランタイム設定の導入、エラーハンドリングの改善、フェーズ別設定、そして本番向けソースマップの扱い改善です。エンジニア向けにアップグレード手順と注意点を簡潔にまとめます。

Key Points

• パフォーマンス
  • ページ解決ロジックを簡素化し、平均で約102x高速化（2.347ms → 0.023ms）。
• 環境設定
  • next.config.js に publicRuntimeConfig / serverRuntimeConfig を追加可能。
  • クライアント・サーバで値を取得するには import getConfig from 'next/config' → const { publicRuntimeConfig, serverRuntimeConfig } = getConfig() を使用。
• エラーハンドリング
  • ページバンドルが 404 を返した場合はルーターが検出して自動でリロードするように改良。開発時のエラー回復テストも追加。
• フェーズ対応の設定関数
  • module.exports = (phase, { defaultConfig }) => config で実行フェーズ（開発/ビルド/本番/エクスポート）に応じた設定を返せる。
  • next/constants の PHASE_* を利用可能。
• 本番ソースマップ
  • webpack 設定で devtool: 'source-map' を有効化するか、@zeit/next-source-maps を導入すると本番ソースマップを出力。
  • app.js が main.js に置き換わり、ソースマップが適切に生成されるようになった。
• プラグインと互換性
  • 新公式プラグイン @zeit/next-bundle-analyzer を追加。@zeit/next-css/-sass/-less などもホットリロードやスタイル検出が改善。

Upgrade (実務向けまとめ)

• アップグレードコマンド:
  • npm i next@latest react@latest react-dom@latest
• 既存の @zeit/next-* プラグインも最新に更新すること（特に CSS/SASS/LESS/TypeScript プラグイン）。
• next.config.js を関数エクスポートに切り替えるとフェーズ制御が可能。
• クライアントで参照する設定は必ず publicRuntimeConfig に入れる。

補足

• エラーハンドリングやソースマップ周りの変更はデプロイ先 CDN/静的ホスティングの挙動に影響するため、ステージングで動作確認を推奨します。