Summary of Next.js Version 10 features

Nextjs has had over 20 new features that improve performance and developer experience. At the same time, the JavaScript size of the Next.js core has been reduced by 16%.

Automatic image optimization

Because the web is not only made of JS, they’ve also introduced automatic image optimisation through introducing a component that will replace the HTML <img> element.

• When using the Image component from next/image, images are automatically lazy-loaded.
• Whenever a large image is used on phone screens, the next/image component will automatically generate smaller sizes through built-in Image Optimization.
• Built-in Image Optimization automatically serves the images in modern image formats like WebP, which is about 30% smaller than JPEG

Internationalize Routing

Built-in support for internationalized routing and language detection.

• This supports Next.js’s hybrid strategy, meaning you can choose between Static Generation or Server-Rendering on a per-page basis.
• Next.js 10 supports the two most common routing strategies: subpath routing and domain routing.
• Subpath routing puts the locale in the url. This allows all languages to live on a single domain.
• Domain routing enables you to map a locale to a top level domain.
• Next.js 10 has built-in language detection on the / route based on the `Accept-Language` header, which all modern browsers support.

Next.js Analytics

The solution for tracking real-world performance metrics and feeding those insights back into your development workflow.

With Next.js Analytics:

• Instead of measuring once, you will now measure continuously.
• Instead of measuring on your development device, measurements will come from the actual devices that your visitors are using.

Core Web Vitals

Google, in conjunction with the Web Performance Working Group, have established the set of metrics to accurately measure how users experience the performance of your website: aptly named, Web Vitals.

Web Vitals are metrics that track the perceived loading speed, responsiveness, and visual stability of your website — all three essential for website’s overall health!

getStaticProps / getServerSideProps Fast Refresh

When making edits to your getStaticProps and getServerSideProps functions Next.js will now automatically re-run the function and apply the new data. This allows you to iterate quicker without having to refresh the page.

Automatic Resolving of `href`

As part of Next.js 10 you no longer have to use the as property for the majority of use-cases on Link component from next/link

e.g

<Link href=”/categories/[slug]” as=”/categories/books”> becomes <Link as=”/categories/books”>

Conclusion

In conclusion, I am always excited about good things.

So after going through the Next.js 10 release blog post, I thought summarising the features will help the future me retain the version 10 features.

After summarising for myself, I thought it will also make sense to share it for those who might not have the time to go through the post like I did.