Paul Krill
Editor at Large

Next.js taps Webpack 5 for faster builds

news
May 4, 20212 mins

Next.js 10.2 expands the use of Webpack 5 to improve disk caching, fast refresh, and tree shaking. Upgrade also improves startup performance.

crane construction building industrial iot
Credit: Getty Images

The latest upgrade of Vercel’s Next.js framework for building React web applications speeds up builds and refreshes with expanded use of the Webpack 5 module bundler.

Introduced April 28, Next.js 10.2 uses Webpack 5 to improve disk caching, allowing the compiler to persist work between build runs. Because only changed files will be recompiled, performance of subsequent builds is dramatically improved, by up to 63 percent.

With Next.js 10.2, all applications that do not use a custom webpack configuration in their next config.js will automatically use Webpack 5. Webpack 5 also offers benefits including better fast refresh and improved long-term asset caching. Also, CommonJS now can be tree-shaken to automatically remove unused code.

Other improvements in Next.js 10.2 include:

  • Startup performance has been improved via better Next.js initialization.
  • Headers, rewrites, and redirects now support a has property to match against incoming cookies, headers, and query strings.
  • Automatic web font optimization is now supported, with Next.js by default automatically inlining CSS at build time, eliminating an extra round trip to fetch font declarations. This results in improvements to First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Automatic web font optimization now supports Google Fonts, with plans afoot to expand support to other font providers. Also planned is adding control over loading strategies and font-display values. By optimizing fonts by default, developers will be able to more quickly ship websites and improve Core Web Vitals.
  • For accessibility, route changes now are announced to screen readers and other assistive technology by default.

Users of Next.js can update to version 10.2 by running npm i next@latest.

Paul Krill

Paul Krill is editor at large at InfoWorld. Paul has been covering computer technology as a news and feature reporter for more than 35 years, including 30 years at InfoWorld. He has specialized in coverage of software development tools and technologies since the 1990s, and he continues to lead InfoWorld’s news coverage of software development platforms including Java and .NET and programming languages including JavaScript, TypeScript, PHP, Python, Ruby, Rust, and Go. Long trusted as a reporter who prioritizes accuracy, integrity, and the best interests of readers, Paul is sought out by technology companies and industry organizations who want to reach InfoWorld’s audience of software developers and other information technology professionals. Paul has won a “Best Technology News Coverage” award from IDG.

More from this author