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.

nextjs

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.

nextjs

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.

Banner


Edera Releases Open Source Container Benchmark And Scanner
07/11/2024

Edera has released Am I Isolated, an open source container security benchmark that probes users runtime environments and tests for container isolation.



JetBrains Improves Kubernetes Support In IDE Upgrades
12/11/2024

JetBrains has improved its IDEs with features to suggest the logical structure of code, to streamline the debugging experience for Kubernetes applications, and provide comprehensive cluster-wide Kuber [ ... ]


More News

espbook

 

Comments




or email your comment to: comments@i-programmer.info

Last Updated ( Thursday, 21 September 2023 )