Summary

Next.js 9.2 はエンジニア向けに以下を導入しました：ネイティブのグローバルCSSインポート、コンポーネント単位のCSS Modules（.module.css）、HTTP/2を活用した改善されたチャンク分割、そしてキャッチオール動的ルート。すべて後方互換で、アップグレードはパッケージを最新にするだけです。

Key Points

• グローバルCSSのネイティブサポート：グローバルな .css は pages/_app.js 内でインポートする（例：import '../styles.css'）。開発時はホットリロード、 本番は単一の最小化された .css に連結され <link> で読み込まれる。
• CSS Modules：[name].module.css を使うとローカルスコープのクラス名が生成され、任意の場所からインポート可能。グローバルCSSと併用可（.module.css のみモジュール化される）。
• 改善されたチャンク分割：HTTP/2 を活用してより多くの小さなチャンクを生成。最小ページチャンク、frameworkチャンク、160KB超のライブラリチャンク、commons、共有チャンク、ランタイム等に分割され、初期ロードとナビゲーションでの転送量を削減。
• キャッチオール動的ルート：pages/post/[...slug].js のように [...] 構文で /post/a/b/c をマッチさせ、router.query.slug は配列で受け取れる。
• 後方互換：@zeit/next-css 等のプラグインを使っている場合は競合を避けるため削除を推奨。既存コードの変更は不要で恩恵を受けられる。

Upgrade

• アップグレードコマンド：npm i next@latest react@latest react-dom@latest

Practical notes

• グローバルCSSは必ず pages/_app.js でのみ読み込むこと（順序・競合回避のため）。
• コンポーネント単位のスタイルは .module.css を使い、import styles from './Comp.module.css' として className={styles.foo} を使用。
• 大きな依存は自動的に別チャンク化されるため、バンドル最適化のための明示的な設定は不要だが、ビルド結果はプロファイリングして確認すること。