What’s New In Next.js 10

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.

While marketed as a new feature in NextJS 10, NextJS analytics is less of a feature of the framework, and more of a Vercel feature. In order to benefit from this feature, you will need to host your application with Vercel.

• 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.

#react #programming #javascript #next #developer