Summary

Next.js 9.4 がリリースされ、開発体験と静的生成ワークフローが大幅に強化されました。主な変更点は Fast Refresh の標準有効化、Incremental Static Regeneration（β）、.env サポートと NEXT_PUBLIC_ プレフィックス、Node／ブラウザ両対応の fetch ポリフィル、Web Vitals レポート API、絶対インポート／エイリアス、Sass の設定オプション、および複数のヘッドレス CMS 向けサンプルです。以下はエンジニア向けの実践的ポイントです。

Key Points

• Fast Refresh
  • React Refresh に基づく高速で信頼性の高いホットリロードがデフォルトで有効。コンポーネントの状態を保持したまま編集が反映されます。
• Incremental Static Regeneration (β)
  • getStaticProps でページを背景再生成可能。例: unstable_revalidate: 1（秒）でリクエストに応じて再生成。フェイル時は古いページを継続配信。
• 環境変数（.env / NEXT_PUBLIC_）
  • .env を自動ロード。NEXT_PUBLIC_ プレフィックス付きの変数はブラウザバンドルにインラインされるため、クライアントで利用可能。
• 組み込み fetch
  • Node.js とブラウザ双方で fetch が利用可能に。isomorphic-unfetch/node-fetch のインポートは不要。
• Web Vitals レポート
  • pages/_app.js に export function reportWebVitals(metric) を実装して実ユーザ指標をアナリティクスへ送信可能。
• 絶対インポート／エイリアス
  • jsconfig.json / tsconfig.json に "compilerOptions.baseUrl":"." を追加してルートからの絶対インポートを有効化。paths でカスタムエイリアスも設定可能。
• Sass の構成
  • next.config.js の sassOptions で includePaths などを設定可能。
• その他
  • CMS 向けサンプル（Contentful, DatoCMS, Prismic, Sanity, TakeShape）と改善されたログ出力。

Upgrade tips

• 既存の node-fetch/isomorphic-unfetch の削除を検討する。
• クライアントで使用する環境変数は NEXT_PUBLIC_ を付けて明示する。
• 絶対インポートを使う場合は jsconfig/tsconfig を更新してエディタ連携を有効にする。
• ISR は β かつ unstable_revalidate を利用する点に注意。今後 API 名の安定化が入る可能性あり。