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
hasproperty 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-displayvalues. 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.