What's new in Next.js

On October 27th 2020, the first ever Next.js Conf streamed to an audience of more than 34K.

Let's go over the most important highlights!

Next.js v10

The new version of Vercel's framework was released, boasting exciting new features that directly affect website performance and Web Vitals Metrics, allowing developers to have a better impact in search results.

So what are these features?

New Image Component

One of the core metrics of the Web Vitals is the Largest Contentful Paint (LCP), and it directly affects user experience as a web application loads.

Often, images are not properly optimized to have different behaviour based on the visitor device. For example, you may be downloading a 1000x1000 pixels image and only rendering a 200x200 pixels image on mobile devices.

Luckily, this new version introduces a new Image component that acts as a drop-in replacement for the HTML <img> element, with the advantage that comes with built-in optimization for different devices. Under the hood, images rendered with the new Image compoonent will be lazy-loaded , and will only render when they are within the viewport.

Migration

Integrating the new Image component is as easy as replacing all img elements with the new component:

Before

<img alt="Company Logo" src="/images/logo.jpg" width="200" height="125" />

After

import Image from 'next/image'

<Image alt="Company Logo" src="/images/logo.jpg" width="200" height="125" />

One important thing to note is that the width and height props are required. Although one may think it will affect responsive layouts, this is not the case, because the image will be automatically made responsive based on the aspect ratio from the provided dimensions.

Internationalization

After 2 months of gathering feedback from the community, in an RFC, the ability to add i18n to a Next.js application is now built into the framework. Before this release, it was only possible through a custom server, which is not encouraged anymore by the Vercel team.

Instead, you can now easily configure a Next.js application to have i18n capabilities by just adding some extra parameters to the configuration file:

next.config.js

module.exports = {
  i18n: {
    locales: ['en','es'],
    defaultLocale: 'en',
  },
}

The routing can happen at two different levels; subpath routing (adds the locale as an URL path, i.e. https://miwebsite.com/es/about) and domain routing (reads the locale from an absolute URL, i.e https://mywebsite.es).

To enable domain routing , the configuration file will need to be slightly different:

next.config.js

module.exports = {
  i18n: {
    locales: ['en', 'es'],
    domains: [
      {
        domain: 'mywebsite.com',
        defaultLocale: 'en',
      },
      {
        domain: 'mywebsite.es',
        defaultLocale: 'es',
      },
    ]
  },
}

This new version also has automatic language detection on the / route by checking the Accept-Language header, which will be matched against the provided configuration.

Improved Link component

Trying to create a link to a dynamic route by using a combination of the href and as props was somewhat confusing before. However, now the next/link component only needs the href prop.

Before:

<Link href="/blog/[slug]" as="/blog/hello-world" />

After:

<Link href="/blog/hello-world" />

This is not a breaking change so you can still continue using both props. However, now it is more developer-friendly.

Blocking fallback for getStaticPaths

What makes Next.js stands over other frameworks is the ability to incrementally generate static pages. This means, if you are building an e-commerce platform with lots of products, you won't need to statically generate all pages at build time. Instead, you can opt in to incrementally generate the pages in getStaticPaths.

Starting in Next.js 9.3, you could opt-in to this by adding a fallback property in getStaticPaths. At build time, a static fallback page was generated so the first time a user visited a given URL, it would be served, and once the data was fetched, a new page would be served, and pushed to the CDN for subsequent loads.

However, now we have the ability to avoid showing a fallback page at all and instead blocking the render until the data has been fetched by just adding fallback: 'blocking' to the returned object from getStaticPaths.

Before:

export async function getStaticPaths() {
  return {
    fallback: true,
  }
}

After:

export async function getStaticPaths() {
  return {
    fallback: 'blocking',
  }
}

notFound support for getStaticProps and getServerSideProps

The getStaticProps and getServerSideProps methods implemented a new boolean property: notFound. By adding it, your users will be redirected to your 404 page.

export async function getStaticProps () {
  return {
    notFound: true,
  }
}

redirect support for getStaticProps and getServerSideProps

A redirect property was also added to both methods. Allowing you to redirect to either an internal or an external page, with the ability to also mark the redirect as permanent.

export async function getStaticProps() {
  return {
    redirect: {
      destination: '/new-page',
      permanent: true,
    },
  }
}

Vercel's Next.js Analytics

Although this is not related only with the framework, Vercel released Next.js Analytics, a new feature of the platform that collects analytics from real users by measuring Core Web Vitals and generating reports.

Next.js Commerce

If you are planning to spin up an e-commerce functionality on top of Next.js, you can just clone an all-in-one starter kit that includes all of the previously mentioned new features.

Moving forward

We are planning to release a series of Next.js articles in the upcoming weeks, including in-depth guides on how to create a Next.js application using all of the new features, including best practices and tips from the community. Stay tuned!

This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdotlabs.com.

This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.