7 New Features introduced in Next js 11 in 2021

{
  "name": "nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  }
}

Upgrade an existing React js project

You can upgrade an existing project by running

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

Make sure your package.json is updated with the latest Next js and React js versions.

Backward compatibility warning

Next.js 11 introduces some incompatible changes which should not affect the majority of users. These legacy features have been backward-compatible for years since v4.0. This ensures reduced bundle size and maintainability of the codebase. With Next.js 11, the minimum required React version has been updated to 17.0.2.

Conformance

Performance, security, and accessibility are major aspects of today's application development and maintenance. That introduces an extra layer of complexity on top of already complicated technical and business logic. Site owners and developers are responsible for handling these things.

Conformance includes delivering optimized solutions and rules to support optimal loading, Core Web Vitals, security, and accessibility. That plays a major role in adopting to latest google update related to Core Web Vitals.

These additions free developers from the additional security and maintenance overhead and allow them to focus on implementing the business necessities.

Next js 11 supports ESLint out of the box. For those who don't know about ESLint, ESLint can statically analyze your code to find any problems. Most of the editors have ESLint is built into them. You can add ESLint by running

$ npx next lint

Make sure to upgrade your project to Next js 11 before running the ESLint command. That optimizes the loading speed and adds an in-memory config caching layer.

Improved Performance

Next js 11 comes with a new implementation of Babel loader for webpack. That means no functional changes for software developers but an improved development experience.

Next js 11 Script component next/script

The newly introduced Next.js Script Component allows developers to set the loading priority of scripts. The developer has control over the loading sequence of scripts based on priority. Usually, third-party scripts such as analytics and display ads tend to be heavy on loading performance and reduces the user experience significantly. The new Script tag offers three strategies to load your scripts.

1. Next js 11 Script beforeInteractive strategy

The beforeInteractive strategy is for scripts that need to be fetched and executed before the page is interactive. Scripts for bot detection and consent management are some examples. These scripts are inserted into the initial HTML rendered by the server and run before self-bundled JavaScript is executed.

<Script src="https://example.com/static/consentscript.js" strategy="beforeInteractive"/>

<Script src={url} strategy="beforeInteractive"
  onLoad={() => {
  //load other scripts in sequence
  }}/>

2. Next js 11 Script afterInteractive strategy

This strategy is for scripts that can wait until the page becomes interactive. Scripts used for tag managers and analytics are potential candidates for this strategy. These scripts are inserted on the client-side and will run after page hydration.

<Script src="https://www.googletagmanager.com/gtag/js?id=122" strategy="afterInteractive"/>

3. Next js 11 Script lazyOnload strategy

This strategy is for scripts that can wait to load during idle time. Potential candidates are chat support and social media widgets.

<Script src="https://www.googletagmanager.com/gtag/js?id=122" strategy="lazyOnload"/>

Next js 11 Image component next/image

There are several improvements for the next/image component. These changes help enhance SEO by reducing layout shifts and creating a smoother visual experience.

Automatic size detection

Unlike in the previous version, the built-in Image component doesn't require explicit height and width declaration. This is applicable when importing the image as a source.

import Image from 'next/image'
import logo from '../public/logo.png'
export default function Home() {
  return (
    <Image src={logo} alt="Website logo" />
  )
}

Image placeholders

Next js 11 Image component now supports blur-up placeholders. That reduces the loading time by enhancing the transition from blank space to the image. That improves SEO for users with slower internet connections.

<Image src={logo} alt="Learnbestcoding Logo" placeholder="blur" />

For dynamic images, the Image component supports custom blurDataURL which accepts dynamic images reside in back end.

<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="Logo"
  placeholder="blur"
/>

Webpack 5

Next js 11 makes webpack 5 the default for all Next js applications. Existing applications with custom webpacks can be upgraded to webpack 5.

Create React App Migration (Experimental)

Converting your React js application to Next js is easier than ever. This conversion automatically adds necessary Next js app structures such as pages directory and moves CSS imports to the proper location. That also enables a Create React App compatibility mode in Next.js.

npx @next/codemod cra-to-next

Next.js Live (Preview Release)

Next.js Live improves development speed and experience. Technologies such as ServiceWorker, WebAssembly, and ES Modules are utilized to bring a significant amount of development process into the web browser.