What’s New In NextJS 10
By: Malcolm Laing
Tags: Programming, React, JavaScript, Nextjs, Reactjs

What’s New In NextJS 10

Internationalization, image optimization and so much more

Photo by Priscilla Du Preez on Unsplash

NextJS is a popular framework for making high performance, server-rendered React applications. Originally released in 2016 by Vercel, NextJS has come a long way. It’s now one of the most popular frameworks for not only building server-rendered applications but also for building static sites.

Let’s go over what’s new in this release, and why we are so excited for the future of NextJS.

Highlights

• Automatic Image Optimization

NextJS 10 introduces a new component: next/image. The NextJS team worked with the Google Chrome team to create this component that offers performance as a default. With this component, our images are automatically lazy-loaded and responsive.

One of our biggest complaints with NextJS was their lack of an alternative for the great gatsby-image component. Not anymore! And since next/image optimizes our images on demand, our builds remain fast, no matter how many images we add to our application.

• First Class Internationalization Support

NextJS 10 supports the two most popular internationalization routing strategies: subpath routing and domain routing.

A website using subpath routing would have routes that look like this: www.store.com/fr/blog . While a website using domain routing would look like this: www.store.fr/blog .

To set subpath routing, we can update our next.config.js like this:

module.exports = {

i18n: {

locales: ['en', 'fr'],

defaultLocale: 'en'

}

}

And for domain routing, like so

module.exports = {

i18n: {

locales: ['en', 'fr'],

domains: [

{

domain: 'store.com',

defaultLocale: 'en'

},

{

domain: 'store.fr',

defaultLocale: 'fr'

}

]

}

}

NextJS 10 has built-in language detection at the root of your site, based on the Accept-Language header. Your users will then be automatically redirected to their preferred language.

• Next.js Analytics

NextJS analytics is all about getting real-world insights into how your website performs. Instead of relying on static tools like Lighthouse, we should judge the performance of our website in the real world, by capturing metrics from real user sessions.

NextJS analytics metrics can be used with any service, not only Vercel. For more information, check out the documentation.

• NextJS Commerce

NextJS commerce is a powerful starter kit for creating e-commerce applications.

• React 17 Support

Since React 17 brought no breaking changes, we can upgrade to the latest React version in NextJS by updating React and Next.

When we upgrade to NextJS 10, the new JSX transform is automatically enabled. So we no longer need to import React in order to use JSX.

• Importing CSS from node_modules

In the past, we needed to put all of our global CSS imports into our _app.js file. Now with the release of NextJS 10, we can code split this CSS by only importing it where it is used.

• Automatic href resolution

Before NextJS 10, when working with dynamic routes, we would have to include both the href and the as parameters.

<Link href="/blog/[id]" as="/blog/new-in-nextjs-10">

Now with NextJS 10, we can omit the as parameter, and replace our href parameter with what was previously in as .

<Link href="/blog/new-in-nextjs-10">

This behaviour is fully backwards compatible, so we can incrementally update our links as we move forward.

Takeaways

While this release brought many new features, we are particularly excited about two in particular: the Image component, and first-class internationalization support. These are two areas where we feel that NextJS was lagging behind, and it’s exciting to see how they addressed.

Honestly, at this point, I don’t see why anyone would choose to use Gatsby over NextJS.

NextJS just keeps getting better and better. Let’s see what the future brings.

To read more about this release, and NextJS, be sure to check out the official blog post.