Vercel, the creator of the Next.js React framework, recently announced Next.js 10 at the first annual Next.js Conf. Next.js 10 features automatic image optimization, internationalized routing, and continuous web vitals analytics.
Next.js 10 adds a built-in <Image> component to be used as a drop-in replacement for the HTML <img> element. Developed in collaboration with the Google Chrome team, the new Image component seeks to improve page performance by implementing best practices: lazy loading, layout placeholders, ratio-based image responsiveness, and image format optimization.
The following HTML code:
<img src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">
would be replaced with:
import Image from 'next/image'
<Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">
The Next.js team explained the importance of optimizing the footprint of images:
Images take up 50% of the total bytes on web pages.
Images have a big impact on Largest Contentful Paint as they’re often the largest visible element when a page is loaded. Largest Contentful Paint is a Core Web Vital that Google will be using in their search ranking very soon.
Half of all images are over one megabyte in size, […] Sites load a 2,000 by 2,000 pixel image, but phones are only displaying it as 100 by 100 pixels. […]
30% of images on web pages are outside of the initial viewport, […]
99.7% of images on websites don’t use modern image formats like WebP.
In order to use images on web pages in a performant way a lot of aspects have to be considered: size, weight, lazy loading, and modern image formats.
Additionally, instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. This results in a build time that is decoupled from the number of images on the site. Developer experience on large sites with plenty of images may see significant improvements. The full documentation for the Image component is available online.
Next.js 10’s internationalized routing and language detection address the needs of the web applications that cater to an international audience. Next.js 10 supports both subpath routing (e.g., /en/blog) and domain routing (e.g., example.nl). Language detection relies on the locales configured in the Accept-Language header on the / route. Developers include the internationalized routing configuration in the next.config.js file. Users are then served the pages that correspond to the detected language. An example of internationalized (domain) routing configuration is as follows:
// next.config.js
module.exports = {
i18n: {
locales: ['en', 'nl'],
domains: [
{
domain: 'example.com',
defaultLocale: 'en'
},
{
domain: 'example.nl',
defaultLocale: 'nl'
}
]
}
}
The full documentation for internationalized routing can be found online.
Next.js 10 also adds live measurement of web vitals analytics. As Google announced earlier this year that it will add core web vitals as a ranking signal, the ability of sites to optimize the indicators that Google drives through the Web Performance Working Group may become an important success factor.
Instead of measuring once, you will now measure continuously.
Instead of measuring on your development device, measurements will come from the actual devices that your visitors are using. […]
Sites that load personalized content or ads may also experience wildly different performance from user to user. […] An emulated test cannot capture these important signals.
Next.js Analytics thus provides a score (dubbed Real Experience Score) computed with data from actual visitors. The documentation — accessible online provides instructions to enable the feature in a Next.js application.
Next.js 10 contains additional features improving developer experience or catering to specific verticals (Next.js Commerce). Developers are encouraged to review the full release note online.
Next.js is open-source software available under the MIT license. Contributions are welcome via the Next.js GitHub repo following the Next.js contribution guidelines and code of conduct.