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:
- Work with background-image or image-set.
- Use <picture> media queries to carry out Art Direction or Light/Dark mode images.
- Work with canvas context.drawImage() or new Image().
- Moreover, now the placeholder prop provides support for arbitrary data: image/ for placeholder images.
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.
