blogs
Next.js 10: Explore the Latest New Features and Updates
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!!
