Committed to bringing developers the best experience, Next.js version 11 is released!

Next.js.cons was held last night, the conference released the next.js 11 version and next.js Live, let’s take a look at the important content!

New features:

• Conformance : A system that provides elaborate solutions to support the best user experience.
• performance improvement : further optimization to improve the cold start time so that you can start coding faster.
• next/script : automatically load third-party scripts first to improve performance.
• next/image : Reduce layout shift, create a smoother visual experience through automatic size detection and support for fuzzy placeholders.
• Webpack 5 : Now enabled by default for all Next.js applications, which can bring these benefits to all Next.js developers.
• Create reaction application migration (experimental) : Automatic conversion to create reaction application to be compatible with Next.js.
• Next.js Live (Preview) : Write code in the browser in real time with your team.

Update immediately by running and referring to the migration guide below.

https://nextjs.org/blog/next-11#upgrade-guide

npm i next@latest react@latest react-dom@latest

Conformance

Even with powerful tools and automatic optimizations in the framework, website owners and application developers are often asked to become experts on UX quality topics, such as performance, security, and accessibility. With the addition of features and the expansion of the team, developers need to think in different ways.

Through their commitment to building large-scale web applications (such as search and maps), Google has proven that as teams and applications expand, frameworks can play a key role in maintaining quality. By taking advantage of powerful default and protection systems, they enable developers to focus more on features and products.

Today, Google's web platform team has begun to use Conformance for Next.js to open source their system.

Conformance is a system that provides well-designed solutions and rules to support optimal loading and Core Web Vitals, and further adds support for other quality aspects such as security and accessibility. These solutions free your team from having to remember all the latest rules for optimal loading performance, while still giving you the flexibility to make the right choice for your application.

In addition to many basic optimizations supported by performance research, Next.js 11 now supports ESLint out of the box to make it easier to capture framework-specific issues during development and set guidelines for your team to ensure even Best practices can also be obtained when expanding.

To start using ESLint, please run it after upgrading to Next.js 11. ESLint integration applies to new and existing Next.js applications, providing a new set of rules to help developers build better applications.

npx next lint

$ npx next lint
We created the .eslintrc file for you and included the base Next.js ESLint configuration.

./pages/about.js
7:9  Warning: Do not include stylesheets manually. See: https://nextjs.org/docs/messages/no-css-tags.  @next/next/no-css-tags
10:7  Warning: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts.  @next/next/no-sync-scripts

./pages/index.js
4:10  Warning: Do not use the HTML <a> tag to navigate to /about/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages.  @next/next/no-html-link-for-pages

Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

✨  Done in 1.94s.

Performance optimization

Starting from Next.js 10, we have been focusing on improving the developer experience of Next.js. In 10.1 and 10.2, we reduced the startup time by 24%, and with React Fast Refresh we reduced the change processing time by another 40%. Just by keeping Next.js updated, you have already got these amazing speed improvements.

Next.js 11 includes another optimization for Babel to further reduce startup time. We created a new Babel loader implementation for webpack, optimized loading and added a memory configuration cache layer. In fact, this means no change for developers, but in the end it will mean a faster development experience.

Script optimization

The new Next.js Script Component is a basic optimization that allows developers to set the loading priority of third-party scripts to save developers time and improve loading performance.

Websites usually require a third party to perform analysis, advertising, customer support widgets, and consent management. However, these scripts often affect the loading performance and will slow down the user experience. It is often difficult for developers to decide where to place them in the application for optimal loading.

You can define attributes after the update, and Next.js will automatically prioritize them to improve loading performance: next/scriptstrategy

• beforeInteractive : Used for key scripts that need to be obtained and executed before page interaction, such as robot detection and consent management. These scripts are injected from the server into the initial HTML and run before executing the self-binding JavaScript.
• afterInteractive (default): Used for scripts that can be obtained and executed after page interaction, such as tag manager and analysis. These scripts are injected on the client side and will run after hydration.
• lazyOnload For scripts that can wait to load during free time, such as chat support and social media widgets.

Image improvement

We are very happy to share with you the two features that our community most needs for this component, reducing the accumulated layout offset and bringing a smoother visual experience. next/image

Automatic size detection (local image)

Use keywords to customize images and static images. importsrcwidthheight

For example, using the built-in Image component is now easier:

import Image from 'next/image'
import author from '../public/me.png'

export default function Home() {
  return (
    // When importing the image as the source, you
    // don't need to define `width` and `height`.
    <Image src={author} alt="Picture of the author" />
  )
}

Image placeholder

next/image now supports fuzzy placeholders to simplify the transition from blank space to images and reduce perceived loading time. This optimization is aimed at users with slower Internet connections.

To use fuzzy placeholders, please add to your image placeholder="blur"

<Image src={author} alt="Picture of the author" placeholder="blur" />

Next.js also supports blurry dynamic images by allowing you to provide customization provided by the backend. For example, you can generate a blurha.sh on the server. blurDataURL

<Image
  src="https://nextjs.org/static/images/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="Picture of the author"
  placeholder="blur"
/>

Webpack 5

In Next.js 10.2, we extended the launch of webpack 5 to all applications that have no custom webpack configuration in the .js files. Today, we set webpack 5 as the default version of all Next.js applications, and it will provide various features and improvements. next.config.js

We work closely with the community to ensure a smooth transition to webpack 5, running more than 3,400 existing Next.js integration tests on every pull request that enables webpack 5.

If your application has a custom webpack configuration, we recommend that you follow the webpack 5 upgrade documentation. If you encounter any problems, please share feedback with us.

CRA migration

In the past six months, we have seen more and more applications migrate from Create React App to Next.js to take advantage of the many developer experience and end user performance improvements provided by Next.js.

To help developers convert their applications to Next.js, we introduced a new tool to automatically convert Create React App applications to Next.js compatible. @next/codemod

The conversion will automatically add a table of contents and move the CSS import to the correct location. It will also enable Create React App compatibility mode in Next.js to ensure that certain modes used in Create React App are compatible with Next.js.pages/

By taking advantage of the new transition, you can gradually adopt Next.js while maintaining the functionality of the existing Create React App application.

To start migrating your Create React App project, use the following command:

npx @next/codemod cra-to-next

Next.js Live (Preview)

Next.js Live is a continuation of our mission to make development not only faster and more fun, but more importantly, to make the entire organization more inclusive. By leveraging cutting-edge technologies such as ServiceWorker, WebAssembly, and ES Modules, Next.js Live puts the entire development process in a web browser. This opens up possibilities such as instant collaboration and sharing using URLs without the need for construction steps. For developers, this means faster feedback loops, less time waiting for a build, and real-time peer-to-peer programming and editing in the browser.