Just this past October 27, the Next. Js team officially announced the release of version 12.

As announced in the next.js Conf, next.js 12 is the largest release of next.js ever, with an overview of the updates:

  • Using Rust compiler: refresh speed increased by 3 times, build speed increased by about 5 times
  • Middleware (beta): Complete flexibility in next.js by configuring code
  • React 18 Supported: SupportedSuspense,React Server ComponentsNew features such as
  • <Image />AVIFSupport: Choose to reduce the image by 20%
  • Bot-aware ISR Fallback: Optimize SEO for web crawlers
  • Native ES module support: consistent with standardized module systems
  • URL Imports (alpha): Supports importing packages (such as CDN) from any URL without NPM installation

We can install the latest version of next.js via NPM I next@latest.

Rust compiler

Next. Js 12 now has the Rust compiler enabled by default, making it roughly three times faster to refresh and five times faster to build.

This is actually a big step for Rust, because its stability is now verified on one of the largest codebase in the world.

It’s easy to compile with Rust, which compiles 17 times faster than Babel, and they’ve made a number of improvements to WebPack, including optimized quick refreshes and on-demand imports.

The next.js team has done a lot of work to migrate from Babel to Rust, for example, implementing a new Rust CSS parser, styled- JSX.

In terms of compression, the Rust compiler is 7 times faster than Terser compression, and compression is optional:

// next.config.js

module.exports = {
  swcMinify: true
}
Copy the code

It is worth noting that the Rust compiler for next.js is implemented based on SWC.

SWC is a high-performance TypeScript/JavaScript translator written in Rust, similar to Babel.

Next. Js also poached SWC author DongYoon Kang and Key Parcel contributor Maia Teegarden.

Middleware

Next. Js 12 introduces the concept of middleware in this release, similar to middleware in the Koa framework, which allows you to do things more flexibly through code, rather than through annoying configurations.

In middleware, you can get the user’s complete request, and then you can rewrite the request, redirect it, add headers, and so on.

Standard runtime Web apis such as FETCH are also supported in the middleware.

If you want to use middleware in next.js, you can create a pages/_middleware.js file:

// pages/_middleware.js

export function middleware(req, ev) {
  return new Response('Hello, world! ')}Copy the code

The React 18 support

The Next. Js team has been working closely with the Facebook team, and while React 18 is only available in alpha, it will be supported in Next.

npm install react@alpha react-dom@alpha
Copy the code

You only need to turn on some experimental configurations to use the Suspense, Automatic batching, and startTransition apis in React 18.

Streaming server rendering

Concurrency rendering in React 18 includes support for server-side Suspense and SSR streaming rendering, which you can enable by enabling the following configuration:

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true}}Copy the code

React Server Component

The React Server Component addresses the impossible triangle of user experience, maintainability, and performance by rendering components on the Server.

The two main points of the Server Component are as follows:

  • Components running on the server side only return DSL information and contain no other dependenciesTherefore, all dependent NPM packages of the Server Component are not packaged to the client.
  • You can access any API on the serverWith Nodejs, you can theoretically do anything a server can do in a front-end component.
  • The Server Component integrates seamlessly with the Client ComponentThe Client Component can be seamlessly called from the Server Component.
  • The Server Component returns information on demandUnder the current logic, all references to the branch logic that cannot be reached are not imported by the client. For example, if the Server Component references a huge NPM package, but some branch does not use the function provided by the package, the client will not download the huge NPM package to the local.
  • Because what is returned is not HTML but a DSL, the State generated by the server component is maintained even if it is pulled again. For example, if A is ServerComponent and its child B is Client Component, the state of Component B is modified. For example, if A is triggered to pull the DSL again, the text entered by Component B will be retained.
  • Suspense can be seamlessly combined with SuspenseSuspense loading cannot be displayed in time due to network reasons.
  • Shared components can run on both the server and client sides.

You can enable it with the following configuration:

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true.serverComponents: true}}Copy the code

ES Modules

ES Modules brings an official, standardized system of Modules to JavaScript. It is currently supported by all major browsers and Node.js.

Using ES Modules can greatly reduce module dependency resolution time and reduce package size.

Starting with next.js 11.1, Next added experimental support for ES Modules over CommonJS Modules. In next.js 12, this is enabled by default, but importing NPM packages that only provide CommonJS is still supported.

URL imports

Starting with next.js 12, we can import any package directly through the URL, and next.js can handle remote HTTP(S) resources as if they were local dependencies.

import confetti from 'https://cdn.skypack.dev/canvas-confetti'
Copy the code

If the URL imports are detected, next.js generates a next.lock file to track the remote resources. URL imports import packages that are cached locally, so we don’t have to worry about being unable to use them without a network.

We just need to add the url prefix that allows import to the configuration file:

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev']}}Copy the code

Support AVIF pictures

The built-in image optimization API now supports the AVIF format, with images 20% smaller than WebP.

The AVIF format can take longer to optimize than WebP, so we can optionally enable it by configuring the images.formats property of next.config.js.

module.exports = {
  images: {
    formats: ['image/avif'.'image/webp']}}Copy the code

In addition, for compatibility between different browsers, next.js will automatically choose AVIF or Webp based on the sniffing of the browser.

For more details, please visit Next. Js official blog: z.org/blog/next-1…

If you want to join us, please feel free to contact me on wechat. In addition, if you want to join the high quality front-end communication group, or you have any other things to communicate with me, you can also add my personal wechat ConardLi.

If there are any mistakes in this article, please leave a comment with me. If this article helps you, please like it and follow it.