What's New in Next.js
Tags: reactnextjs
Published: 2020-11-30 14:55:03

---
title: What's New in Next.js
published: true
date: 2020-11-25 16:35:24 UTC
tags: reactnextjs
canonical_url: https://www.thisdot.co/blog/whats-new-in-next-js
---

# What's new in Next.js

On October 27th 2020, the first ever [Next.js Conf](https://nextjs.org/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](https://web.dev/vitals/), 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)](https://web.dev/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](https://github.com/vercel/next.js/discussions/17078), 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](https://nextjs.org/analytics), a new feature of the platform that collects analytics from real users by measuring Core Web Vitals and generating reports.

## [Next.js Commerce](https://nextjs.org/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](https://www.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](https://www.thisdot.co)._