Summary

Next.js 9.2 (2020-01-15) adds native CSS support (global and CSS Modules), a new HTTP/2-optimized chunking strategy that reduces client bundle sizes, and catch-all dynamic routes. All changes are backwards compatible; upgrade by running npm i next@latest react@latest react-dom@latest.

Key Points

• Built-in global CSS

  • Import global .css files from pages/_app.js (required) so styles remain global and ordering is consistent.
  • In development: hot updates. In production: CSS is concatenated into a single minified file and injected via <link>.
  • If you use @zeit/next-css or similar plugins, remove them to enable the built-in feature.

• CSS Modules for component-level styles

  • Files named with the .module.css convention are locally scoped and can be imported anywhere (e.g. import styles from './Button.module.css' and use className={styles.error}).
  • Production builds emit code-split, minified CSS per hot execution path to minimize per-page CSS payload.

• Improved code-splitting and chunking

  • New default chunking creates: minimal per-page chunk, framework chunk (React/ReactDOM), library chunks for deps >160kb, a commons chunk, plus shared chunks to optimize overall app size.
  • Leverages HTTP/2 to deliver many smaller chunks, reducing initial and successive navigation downloads (real-world partners saw large % reductions with no code changes).

• Catch-all dynamic routes

  • Use [...name] syntax (e.g. pages/post/[...slug].js) to match nested paths like /post/a/b/c; the router query provides slug as an array.

Actionable notes for engineers

• Upgrade packages as shown above to get all improvements.
• Move global imports into pages/_app.js to avoid errors and ensure HMR.
• Rename component-scoped CSS to .module.css to opt into CSS Modules.
• Remove @zeit/next-css from next.config.js/package.json to avoid conflicts.
• Expect better client-side performance out of the box; no code changes required to benefit from new chunking.