blogs

Next.js 10 is out. Find out what's new!

The reloaded version of Next.js, the Next.js 10.0 has recently been introduced. For those who don’t know what’s Next.js, here is an introduction:

Next.js is one of the most popular JavaScript Frameworks. It is used in the development of server-rendered and static sites. It was first launched in 2016. Since then, the framework gained humongous attention from web developers. Now, the latest version of the same, Next.js 10 has been released with more than 20 new features. Let’s see some of the major changes that have been brought to the table.

  • Advanced and automatic image optimization 

The next/image tag facilitates automatic image optimization. The images will now be responsive and preloaded automatically irrespective of the number of images. 

  • Next.js Analytics 

With Next.js 10, you can now get real-world insights of your website performance by capturing metrics from real user sessions. 

  • International routing

Next.js 10 offers support for subpath routing(Example: www.example.com/menu/contact) and domain routing(Example: www.example.menu/contact).

This internationalized routing also made it possible for websites of all languages to reside on a single domain. 

  • Fast refresh

Next.js 10 will support fast refresh for MDX. Now, the webpage need not have to reload when you are working on/editing something. 

  • Next.js commerce 

E-commerce developers will be happy to onboard this feature. Next.js commerce has optimized, SEO ready solutions for e-commerce sites. 

  • href – automatic resolving

Previously, we needed to use the ‘as’ parameter along with the ‘href’ parameter when using dynamic routing. <link href=”/menu/[id]” as=”/menu/contact-us”>Now, the need for use of ‘as’ is eliminated with Next.js 10. We can replace the ‘as’ parameter contents as ‘href’ parameter. 

<link href=”/menu/contact-us”>

  • React 17 Support

We can now upgrade to the latest React version(React 17) in the NextJS just by updating React and Next. When an upgrade to NextJS 10 is performed, the new JSX(JavaScript XML) transform will automatically be enabled. Hence, we need not import React to use JSX.

  • Fallback requests – blocking 

In the previous versions of next.js, “getStaticProps” and “getStaticPaths” were introduced. The “getStaticPaths” had the ability to return a “fallback” property. This property enables the generation of extra static web pages, that can serve as a static HTML site without a rebuild during initial requests and then replaced by the fully rendered website after subsequent requests. Many wanted this feature to be blocked for the first time visitors. Hence, a “fallback: blocking” property has now been introduced to block the fallback property which stops the initial static HTML page from appearing. 

These are some of the most prominent changes that have been brought in the latest update. Hope you like the changes. Happy coding!! 

Similar Blogs

Unveiling the Power of Clean Architecture : Building Strong Foundations for Sustainable Software

blogs Unveiling the Power of Clean Architecture : Building Strong Foundations for Sustainable Software Understanding Clean Architecture : A Comprehensive Overview :   Clean Architecture is a software...

Ensuring Robust Security in iOS App Development : Top 10 Risks and Solutions

blogs Ensuring Robust Security in iOS App Development : Top 10 Risks and Solutions In the ever-expanding digital universe, mobile applications have emerged as indispensable tools, seamlessly...

Optimizing Performance

blogs Optimizing Performance In today’s digital landscape, it’s not just about building functional systems; it’s about creating systems that scale smoothly and efficiently under...