Top 5 Next.js 10 New Features

photo by Vercel on Next.js

This is an incredible moment to be a Fullstack or Frontend developer in general and Next.js one in particular. Last week, the first annual Next.js user conference took place, completely remote with around 70k enrollments and more than 34k live attendees.

Top 5 new features

Among all features released in this new 10th version, my top 5 are the following:

• Built-in Image Component and Automatic Optimization for images using newly available component
• Internationalization, either Routing or Domain-based
• Next.js Analytics for measuring and analyzing real user performance
• Next.js Commerce with an all-in-one starter kit for eCommerce sites
• React 17 Support fully compatible with Next.js

let's briefly check each of those!

Built-in Image Component and Automatic Optimization

According to Vercel, images take up 50% of total page bytes and have a huge impact on performance. Images typically have a considerable size, not being optimized for web and their resolution is not considered neither adapted to media type where they are displayed. Furthermore, they are also loaded when out of the viewport and not having initial width and height defined, they jump around on first-page load / display.

Next.js proposes Image Component to solve previous presented problems and some other not fully described on this post. Usage is simple, just replace previous used <img .../> tags with:

1
import Image from 'next/image'
2
3
<Image src="/images/image.jpg" width="800" height="600" alt="Hero Image" />
4

Properties width and height enforce initial dimensions and allow browsers to render the required image space needed, preventing it to jump around when loaded. Also, they are automatically made responsive, keeping aspect ratio defined with these two properties, and lazy-loaded preventing rendering of images outside the initial viewport.

Regarding image optimization, Next.js generates smaller image sizes through built-in image optimization and uses modern formats like WebP (around 30% smaller than jpeg), if the browser supports it. Moreover it can do it on-demand saving build time comparing with other static site generators.

For more details check the official documentaion.

Internationalized Routing

Internationalization is a key part of many applications and in fact, can contribute to visitor retention or confidence on your site.

Next.js 10, released built-in support for internationalized routing and language detection. It supports two strategies: subpath routing and domain routing.

Let's see how can we add this support, starting by editing next.config.js:

1
module.exports = {
2
  // other configurations
3
  i18n: {
4
    locales: ['en', 'pt'],
5
    defaultLocale: 'en'
6
  }
7
}
8

after, you should choose your strategy:

SubPath routing

You add the locale in the URL, using the same domain. For example, you can insert the locale in the URL like /en/mysite or /pt/mysite.

Domain routing

Allows you to map a locale to a domain. This means that you can, for example, map 'en' for english-site.en and portuguese-site.com mapped to the 'pt' locale. For it, you should add the following also to your next.config.js:

1
module.exports = {
2
  // other configurations
3
  i18n: {
4
    locales: ['en', 'pt'],
5
    defaultLocale: 'en',
6
    domains: [
7
      {
8
        domain: 'english-site.en',
9
        defaultLocale: 'en'
10
      },
11
      {
12
        domain: 'portuguese-site.com',
13
        defaultLocale: 'pt'
14
      }
15
    ]
16
  }
17
}
18

Just worth mentioning that Next.js 10 has built-in language detection on '/' route based on the Accept-Language header. The configured locales are matched against it and redirect according to the configured strategy.

Next.js Analytics

Next.js 10 Analytics has zero-configuration required. Projects with previous versions have to upgrade.

photo by Vercel on Next.js

Now you can track and measure real-time performance metrics. It allows you to understand your users and how you site or application performs. For more information, checkout the documentation.

Next.js Commerce

Everyone is aware of Ecommerce and its growing importance these days.

photo by Vercel on Next.js

In collaboration with BigCommerce, Next.js released the all-in-one starter kit for eCommerce sites, Next.js Commerce. With a few steps, you can clone, customize and deploy a full-blown eCommerce site. Check it out here.

React 17 Support

Despite there are no breaking changes for Next.js with React 17, there are a couple of maintenance changes worth mentioning, like peer dependencies updates and new JSX transform enabled by default, no configuration changes needed. Just upgrade Next.js and React:

npm install next@latest react@latest react-dom@latest
or 
yarn add next@latest react@latest react-dom@latest

And that's it! If you like this post, click Like button below. You can also share your comments or suggestions with me.