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:
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.
With Next.js 10, you can now get real-world insights of your website performance by capturing metrics from real user sessions.
This internationalized routing also made it possible for websites of all languages to reside on a single domain.
Next.js 10 will support fast refresh for MDX. Now, the webpage need not have to reload when you are working on/editing something.
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.
React 17 Support
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!!