Next.js 11

Summary

Next.js 11 improves developer experience and runtime performance with a set of practical features: Conformance rules and built-in ESLint to enforce best practices, a new Script component to prioritize third-party scripts, image improvements to reduce layout shift, Webpack 5 enabled by default, a CRA → Next.js codemod, and a browser-based preview of collaborative development (Next.js Live).

Upgrade tip: run npm i next@latest react@latest react-dom@latest, then npx next lint and follow the upgrade guide if you have custom webpack config.

Key Points

• Conformance: new rule system (from Google Web Platforms) plus built-in ESLint to surface Next.js-specific issues during development. Run npx next lint to enable.
• Script optimization: use the new <Script> component with strategy (beforeInteractive, afterInteractive (default), lazyOnload) to prioritize third-party scripts and improve load ordering and performance.
• Image improvements: next/image supports automatic size detection for imported local images and placeholder="blur" (plus blurDataURL) to reduce Cumulative Layout Shift and improve perceived load.
• Performance: new Babel loader implementation with in-memory config caching to reduce dev server cold-start and reload times.
• Webpack 5: enabled by default for all apps; review custom webpack configs and the upgrade docs if you have customizations.
• Create React App migration: experimental codemod at npx @next/codemod cra-to-next to help move CRA apps to Next.js incrementally.
• Next.js Live (preview): in-browser collaborative development using ServiceWorker/WebAssembly/ES Modules for real-time editing and sharing.
• Compatibility: minimum React version bumped to 17.0.2; Next.js will use createRoot when React 18 alpha is detected. Check the upgrade guide for a few breaking changes.

Actionable Steps for Engineers

• Upgrade packages: npm i next@latest react@latest react-dom@latest.
• Run linter: npx next lint and address flagged Next.js-specific rules or disable rules per docs.
• If migrating from CRA: try npx @next/codemod cra-to-next (experimental) and review generated pages/ and CSS placement.
• If you have custom webpack config: read the webpack 5 migration docs and test thoroughly.

References

• Upgrade guide, ESLint docs, Script component docs, next/image docs, and Next.js Live docs are available on nextjs.org.