Next.js is an open-source JavaScript framework built using React. It helps web developers make user-friendly web applications and static websites.

This renowned React framework has come with its latest version, Next.js 13.5. With each new version, Next.js is getting more powerful. 

Released on September 19, 2023, this new edition has taken the world by storm. Let us find out what is new about it.

This blog explores the exciting Next.js 13.5 features and improvements.   

 

Fast Page Loading

The latest version of Next.js supports quick page loading. Next.js 13.5 has optimized its core framework. Therefore, web applications load faster without compromising on user experience. 

The version 13.5 features built-in optimization for fonts, scripts, images, and application scripts. 

 

Image Improvements

Next.js 13.5 comes with robust image optimization capabilities. In comparison to previous versions, Next.js 13.5 is better in image resizing and compression. As a result, you can deliver your images in a perfect size and format.

In addition to this, the framework has added an experimental function unstable_getImgProps(). It supports different use cases without using the <Image> component. 

Now you can:

 

Improved Startup and Refresh Time

Other Next.js 13.5 improvements that are worth mentioning include fast startups and refreshes. You can notice a significant improvement in refresh and startup time. The framework is now more reliable for App router applications. 

If you compare this new version with the previous Next.js 13.4, it is about 22% faster in local server startup and 29% quicker in HMR (Refresh). Apart from this, it uses about 40% less memory.

Next.js 13.5 has optimized expensive file system operations and removed redundant blocking synchronous calls.

 

Caching in Next.js Apps

Caching has a crucial role in web application development. It has a direct impact on user experience and performance. Besides this, it minimizes the operation cost of the application by storing rendering work and data requests. 

Next.js 13.5 allows users to retrieve the stored version of web applications. Since users do not fetch data from scratch every time, they experience fast web loading. 

Next.js 13.5 supports numerous caching mechanisms. It makes it easier for developers to carry out client-side caching. 

Some prominent caching mechanisms in Next.js 13.5 include:

 

Data Cache

Data Cache is one of the vital Next.js 13.5 updates. It stores the results of different data fetches across server requests and deployments. 

As a result, once data is fetched and stored, users can access it quickly in subsequent requests. Since the results are not coming from the source, it takes less time. 

 

Request Memoization

This caching mechanism helps the server to remember the return values of functions. For instance, if the same data is being requested repeatedly in a React component tree, Next.js stores the data instead of fetching it over again. It is beneficial when the same data needs to be accessed.

 

Full Route Cache

As the name suggests, this mechanism caches the full HTML. Besides this, it also stores the React Server Component payload of a route on the server. It naturally minimizes the cost of rendering.

 

Router Cache

Next.js also stores the cache on the client’s side. It keeps the record of the React Server Component payload for every route segment. The router cache enhances the navigation experience by storing earlier visited routes and prefetching possible future routes.

 

Improved Experience for Developer

With the release of every Next.js version, the framework gets better in the developer experience. The developers can notice a noteworthy improvement in TypeScript support, documentation, and error messages.

In addition to this, you get access to Next.js CLI. This tool helps you see updates for project setup and management. 

 

Metadata API

Metadata API is a crucial addition to Next.js 13.5. With this Next.js 13.5 feature, you do not need to struggle with SEO metatags. Earlier, users had to create a file (head.js) to set the metatags for SEO.

Next.js version 13.5 features a new way of handling static and dynamic metadata. You can export objects with static information. For dynamic data, you can export functions. This approach is more helpful for managing metadata efficiently.

 

Stable App Router

A stable app router is one of the prominent Next.js 13.5 benefits. Now you can use React server components, nested routes & layouts, and simplified data fetching confidently. These updated server components will help you build apps faster.

 

Conclusion

It is imperative to stay informed with the evolving world of web development and its latest technologies. Today, Next.js is a keystone of react-based web development. With Next.js 13.5, you enjoy a range of new features and improvements. Whether it is a developer experience, performance, or security, Next.js 13.5 can keep you ahead in the competitive web development world.

Leave details and I will get back to you