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

Introducing Qwik – The Quickest Framework with O(1) Load Time

blogs Introducing Qwik – The Quickest Framework with O(1) Load Time Websites send JavaScript to the browser to provide interactivity. The amount of JavaScript downloaded to the browser is going...

Simplifying state management in React with React Recoil

blogs Simplifying state management in React with React Recoil Are you a React developer looking for a more efficient way to manage state in your applications? Look no further! Introducing React...

Typescript over Javascript: Unlocking the power of strong typing

blogs Typescript over Javascript : Unlocking the power of strong typing The popularity of TypeScript has been increasing steadily over the years, and more professional developers choose TypeScript in...