Last checked and updated on April 18, 2026What Is New in Next.js 4
Next.js 4 focuses on speed and developer experience, delivering a significantly faster build process and a leaner production runtime. The core updates revolve around performance optimizations, React 16 compatibility, and foundational improvements to the bundling system.
| Category | Key Changes |
|---|---|
| Performance | Up to 4x faster builds with Webpack 3, reduced bundle size, and faster hot reloading. |
| Core Features | Full support for React 16 and styled-jsx version 2. |
| Improvements | Enhanced error reporting, improved next/router prefetching, and better static export behavior. |
| Bug Fixes | Multiple fixes for CSS, routing, and build-related issues. |
How does Next.js 4 improve build performance?
The most immediate impact is build speed. By upgrading to Webpack 3 and implementing scope hoisting, Next.js 4 cuts build times dramatically. In practice, this means your development feedback loop tightens, and production deployments finish quicker.
Bundle sizes are also reduced due to better tree-shaking and module concatenation. This directly translates to faster page loads for your users, as the JavaScript payload sent to the browser is smaller and more optimized.
What does React 16 support enable?
Next.js 4 brings full compatibility with React 16. This allows you to use new features like fragments, error boundaries, and improved server-side rendering. You can now return arrays from component render methods without wrapping them in an extra element.
Support for portals and custom DOM attributes is also included. This matters because it keeps your Next.js stack aligned with the latest React ecosystem, ensuring access to performance improvements and new APIs.
Are there updates to styled-jsx?
Yes, styled-jsx has been upgraded to version 2. This update introduces support for dynamic styles via the new jsx global and allows passing styles as props. The syntax becomes more flexible for managing component-scoped CSS.
// Dynamic styles with styled-jsx v2
const Button = ({ color }) => (
<button>
Click me
<style jsx>{`
button {
background: ${color};
}
`}</style>
</button>
);What routing and error handling improvements were made?
The next/router prefetching logic is now smarter, prefetching pages more efficiently to improve perceived performance. Error reporting is also enhanced, providing clearer stack traces and messages when something breaks during development or build.
Static Export Behavior
The next export command sees improvements in how it handles dynamic routes and asset paths, making it more reliable for generating fully static sites from a Next.js application.
FAQ
Is upgrading to Next.js 4 from version 3 straightforward?
Generally, yes. The upgrade path is smooth for most applications. The main steps are updating the next and react dependencies in your package.json. Always check for breaking changes in the release notes related to any custom Webpack configuration.
Do I need to change my code for styled-jsx v2?
Most existing styled-jsx CSS will work without modification. You only need to update your code if you want to use the new dynamic styling features or the jsx global. Review the styled-jsx v2 documentation for new APIs.
How significant is the 4x faster build claim?
The speedup is very noticeable in medium to large projects. The improvement comes from Webpack 3's scope hoisting, which reduces module overhead. Your mileage may vary based on project size and structure, but the build performance gain is a major win.
Can I use React 16 features like fragments immediately?
Absolutely. Once you upgrade Next.js and React, you can immediately start using React 16 features such as <React.Fragment> or the shorthand <> syntax within your pages and components.
Are there any deprecated APIs in this release?
Next.js 4 itself doesn't heavily deprecate its own APIs. The focus is on addition and optimization. However, always ensure any third-party plugins you use are compatible with Webpack 3 and React 16.