Eight features that grabbed my attention in NextJS V10

Since its inception, NextJS has changed the way we develop React applications. Going beyond components, NextJS was the go-to solution for a full-fledged framework with React.

Recently the NextJS 10 was released, and here are some cool new features worth your attention.

1. Built-in Image Component and Automatic Image Optimization

Images take up to 50% of your web page size, and they have a significant impact on rendering time.

In most cases, these images are not optimized according to the devices, so they are rendered outside of an application’s viewpoint.

The NextJS team and the Google Chrome team have collaborated to find a solution for these issues by introducing an Image component that handles automatic lazy-loading, preloading of critical images, correct sizing across devices, and automatically supports modern formats like Webp.

Next.js does the image optimizations differently. It builds and optimizes images on-demand at runtime when the user requests them. This step helps to reduce the build times of web applications while the number of images grows.

import Image from 'next/image'<Image src="/Ella.jpg" width="400" height="400" alt="Profile Picture">

Comparison of regular HTML img and NextJS Image component

2. Internationalized Routing

Any React application going global needs support for Internationalization. Even if you build for a single locale, it’s safe to keep the provision for language support.

However, language support isn’t a new thing with React. But it could get tricky when serving a React app that supports multiple languages due to Routing.

Most of the existing applications use libraries like i18n to handle this, where you need to control the translations’ rendering and route separately.

NextJS 10 has built-in support for internationalized routing and language detection, which works with both Static Generation or Server-Rendering. These features can be easily enabled by adding a small configuration into the next.config.js file. The support is there for both Subpath routing and Domain routing, as shown below.

ecommerce.com/en/product/9a4d862f-b3e6-5e91f3f1631a --> English
ecommerce.com/si/product/9a4d862f-b3e6-5e91f3f1631a --> Sinhalese
ecommerce.com/product/9a4d862f-b3e6-5e91f3f1631a --> English
ecommerce.lk/product/9a4d862f-b3e6-5e91f3f1631a --> Sinhalese

3. NextJS Analytics

Performance is a critical aspect of the usability of web applications, and it can be measured compared using different types of matrices.

With this latest release, NextJS now provides a real-time metric(web vitals) that tracks your website’s perceived loading speed, responsiveness, and visual stability, all three essential for the website’s overall health. Also, you can have real-time and continuous checks instead of checking once or performing tests.

However, these features are enabled only for NextJS applications, which are hosted on Vercel.

NextJS analytics dashboard reference: https://devops.com/vercel-optimizes-apps-based-on-react-framework/

Tip: Share your reusable components between projects using Bit

Bit (GitHub) makes it simple to share, document, and organize independent components from any project.

Use it to maximize code reuse, collaborate on independent components, and build apps that scale.

Bit supports Node, TypeScript, React, Vue, Angular, and more.

Exploring React components shared on Bit.dev

4. NextJS Commerce

NextJS 10 provides an all in one starter kit for eCommerce sites. NextJS is borrowing the idea of headless CMS sites and applying it to eCommerce.

If you are building an eCommerce web app with React, NextJS Commerce will help you jump-start the development with inbuilt features fundamental to eCommerce.

With all the new features like Image optimization and internationalization and Analytics, it’s quite evident that NextJS will become a game-changer for eCommerce application development.

NextJS Commerce basic template

5. StaticProps, ServerSideProps and MDX Fast Refresh

Static Generation and Server-side Rendering are the 2 types of pre-rendering methods available in NextJS. And both these methods have different strategies to fetch data.

• getStaticProps (Static Generation): Fetch data at build time.
• getServerSideProps (Server-side Rendering): Fetch data on each request.

If you have been working with these functions before NextJS V10, you know the pain of re-running the application to reflect any data changes you made.

With NextJS V10, it automatically re-runs and applies the new data when you change them. This allows us to iterate quickly without having to refresh the page.

Besides, working with markdowns components is relatively more manageable now. With @next/mdx making changes to MDX contents will now have Fast Refresh where the browser does not have to reload the page on edits, which will make the development experience exceptionally smooth.

6. Automatic Resolving of href

When using a dynamic route, you have to provide the attributes href to the Link component, interpolating the href for the dynamic parameters.

But whenever a developer forgets to add it as an attribute, it won’t use client-side routing, which will result in a page refresh.

With NextJS 10, we no longer need to attribute since the href will be automatically resolved. This change is backward compatible, so you don’t have to remove as property in each component to get it working even after migrating to version 10 from an older version.

import {Link} from "next/link";
<Link href="/products/[slug]" as="/products/books">
<Link href="/products/[slug]">

7. Codemod CLI

NextJS team is committed to ensuring that updates are done smoothly, especially when upgrading from an old version of NextJS to the latest version 10.

Codemod is an automated code transformation tool required to update the existing code base.

NextJS 10 provides a Codemods CLI tool that allows you to run a single command to update your application.

npx @next/codemod <transform> <path>

8. Blocking Fallback for getStaticPaths

getStaticPaths method got a fallback property in NextJS 9.3, which generates additional static pages without a full rebuild. It also serves as a static HTML file, which is then replaced by the fully rendered content on subsequent requests.

But as an improvement, NextJS 10 changes the behaviors of getStaticPaths by blocking pre-render when a user requests the page for the first time. After that initial render, the page would be re-used for subsequent requests.

This can be enabled by adding an attribute fallback: ‘blocking’ that allows the blocking behavior where no static fallback is sent to the browser. Instead, the initial request is waited on for pre-rendering.

Conclusion

In conclusion, NextJS 10 looks promising as a React framework with exciting features and improving developer productivity. So far, it’s clear that NextJS will be one of the most loved frameworks out there for React.

However, if you need more information, please refer to NextJS 10 official blog.

Thank you for taking the time to read this. If you have any questions, please comment down below.

Cheers!