Summary

Next.js 9.3 が公開され、静的サイト生成(SSG)の強化、新しいデータ取得API、プレビュー機能、Sassの組み込みサポート、404の自動静的最適化、ランタイムサイズ削減などが追加されました。全て後方互換で非破壊的に導入されており、段階的に採用できます。アップデートは以下を実行します:

npm i next@latest react@latest react-dom@latest

Key Points

• 新しいデータ取得API:
  • getStaticProps：ビルド時に実行（Node.jsサーバー側のみ、ブラウザバンドルに含まれない）。CMSや公開キャッシュ可能なデータに最適。
  • getStaticPaths：動的ルートをビルド時に事前生成するためのパス列挙。fallback: falseは未列挙を404、fallback: trueはオンデマンド生成（フォールバック表示）を許可。
  • getServerSideProps：各リクエストでSSRを実行（サーバー側のみ）。クライアント間ナビゲーションではサーバーから結果をフェッチ。
• Preview Mode：静的に生成されたページをバイパスしてCMSの下書きを表示できる機能。プレビューが必要な編集フローで利用。
• Sassサポート：.scssをグローバルで直接インポート可能。コンポーネント単位は.module.scssでローカルスコープのCSSモジュールを使用。
• 404の自動静的最適化：404ページは静的に提供され、速度と安定性が向上。
• ランタイム最適化：全体で約32KBのランタイム削減により初期読み込みが速くなる。
• コミュニティ：GitHub Discussionsが公式リポジトリで有効化され、質問や議論がしやすくなった。

実装上の注意:

• 既存のgetInitialPropsは非廃止で継続利用可能だが、新規ページや新プロジェクトでは新APIの採用を推奨。
• getStaticProps／getServerSidePropsはサーバーサイド専用なので、クライアントで実行したくない処理（DBアクセスなど）を安全に行える。
• fallback: trueを使う場合はフォールバックUI（ローディング）を用意すること。