Next.js Optimizes Packet Imports
Written by Kay Ewbank   
Thursday, 21 September 2023

Next.js has been updated with faster server startups, lower memory use and optimized packet imports.

Next.js is a page-based routing system with support for dynamic routes. It automatically statically optimizes pages when possible, and carries out server-side rendering of  pages with blocking data requirements.


The first change to the new release is better performance and reliability for App Router applications. Comparing version 13.4 to 13.5, the developers report 22% faster local server startup, along with 29% faster hot module replacement (HMR) for fast refresh, and 40% less memory usage for new applications. They attribute the performance increase to optimizations including doing less work by caching or minimizing slow operations, optimizing expensive file system operations, better incremental tree traversal during compilation, and moving unnecessary blocking synchronous calls to be lazy. The changes mean some users have reported that compilation is up to 90% faster.

The other change of note to this version is optimized package imports. The team says this improves both local dev performance and production cold starts when using large icon or component libraries or other dependencies that re-export hundreds or thousands of modules.

Support for modularizing imports had already been added, which meant developers could configure how imports should resolve when using such libraries. This solution has been superceded with the new optimizePackageImports, which doesn't require you to specify the mapping of imports, but instead will automatically optimize imports for you, and will only load the modules you are actually using, while still giving you the convenience of writing import statements with many named exports.

The main other reported change is a new experimental function for next/image, which extends the HTML <img> element with features for automatic image optimization.

The new unstable_getImgProps() function is intended for use where you don't want to use the <Image> component directly, such as when working with background images,image-set, canvas context.drawImage(), or Light/Dark Mode images.

Next.js 13.5 is available now.


More Information

Next.JS Site

Next.JS On GitHub

Related Articles

Next.js Updates Runtime

Next.js Improves Data Fetching

Next.js 5 Improves Webpack Support

TypeScript 2.7 Improves Type Inference 

React 16 Adds Fragments

React 15.5 Gets Ready For Rewrite

React 15 Released

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.


Grafana Adds New Tools

Grafana Labs has announced new tools to make it easier to analyze application data on Grafana Cloud. The announcements are an Application Observability tool for Grafana Cloud, and Grafana Beyla, the e [ ... ]

Eclipse Launches Dataspace Working Group

The Eclipse Foundation has launched a dataspace working group with the intention of 'fostering global innovation in trusted data sharing'.

More News




or email your comment to:

Last Updated ( Thursday, 21 September 2023 )