Next.js 12.0.1 release

Next.js 12

Next.js has been officially made public since the Next.js conference held in October, 26 2021. It is the biggest release so far. Here are the new features that have been brought to the framework.

The new features

• URL imports (import a React component from a URL), so you can import a React component from an URL instead of a local file, and you can pass in props too!
• Native support for ES modules, to optimize transpilers use, and so the build time, the support for frameworks that has been developed only in CommonJS is still there.
• Rust compiler built in with SWC, and ditching the Babel transpiler, of course Babel support is still there for backward compatibility. According to the Next.js team, this compiler improves build time up to 5 times, and fast refresh up to 3 times in a a large Next.js codebases.
• Middleware use for intercepting HTTP requests and making the necessary changes before the request start being processed, and also on the way back when sending back the response.

• React server components which helps Next.js make use of it and get rid of getStaticProps and getServerSideProps since the component itself is becoming dynamic and it can be rendered at server side.

URL imports

URL imports were available in Next.js 11 on experimental section on the next.config.js file and deactivated by default, in Next.js 12, it has been set to true activated.

In order to use it, you need to add in your URL components to the next.config.js file as below, keep in mind it is an array so add as much as you would, and restart the server for it to take effect:

module.exports = {
  experimental: {
    urlImports: ["https://someurl.com", "https://anotherurl.com"],
  },
};

To learn more about module.exports, check my article in this link.

The reason to add them to the config file is to cache your files in case you want to work offline; these files are cached under next.lock/data.

Native support for ES modules

In order to optimize and make faster build, Next.js supports ES modules which is the standard way for grouping code together into a module, so whenever you have a package written in ES modules, there is no need to apply transpilers on it, it will work directly and save transpiling time, to learn more about ES module, you can check this article.

Rust compiler with SWC

Rust is one of the major changes on the Next.js 12, it became the Babel replacement for transpiling the ES modules into the commonJS, and according to their experiments, it is 17 times faster in compilation than Babel. Also

- The use of Webpack 4 is deprecated, and it is replaced by Webpack5 - Built in conformance: The lint use is **not ignored anymore** during builds by default, which reminds you what best practice to use. You can of course change this value and ignore it but it is discouraged. You can simply add this to your _next.config.js_ file if you opt to ignore it:

eslint: {
  ignoreDuringBuilds: true,
}

## Default Configurations in Next.js 12

Some default configurations has been added, so the use of the framework is more easier, and also helps optimize the js bundles, like:

• ESlint is activated in builds.
• The max inactive age for pages to refresh under dev mode has changed from a minute to 15 seconds.
• Output file tracing is activated by using the @vercel/nft; the option is outputFileTracing and has replaced target in previous Next.js versions.
• The ES modules support is activated.

## Middleware on Next.js

On this version, middleware has been introduced, and it offers:

• Use code over configuration which gives more flexibility.
• Run code before request is completed in cases when you need to redirect, add some specific HTTP header information’s and so on.

Some examples below like:

• Authentication.
• Bot protection.
• Redirects.
• Server side analytics.
• Logging.

To use it, place new _middleware.js inside pages folder like so,

// pages/_middleware.js

export function middleware(req, ev) {
  return new Response("Hello, Middleware!");
}

That means that on each request, it will be processed first by the /_middleware.js code and then continue its way to be processed by actual js code destined for it.

Middleware and Edge functions on Vercel

The middleware deployment as an Edge function on Vercel gives a dynamic page with almost the same speed of static page, and some advantages of deploying edge functions:

• No cold boots
• deploy globally
• support streaming

Though it favors Vercel Cloud use over other Clouds when deploying a Next.js application.

React server components

Introduced in React 18, React server components allow to render components on server side.

With this way, getStaticProps and getServerSideProps no longer needed, and you can render a component dynamically instead of rendering the whole page on the server side, so to give better core web vitals since minimal or no JavaScript is needed in client side to render page, all happens on the server side.

To use it some tweaks are needed on the next.config.js file:

experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  }

Also name any page to *.server.js for server components.

Next.js live

Among other quarks and features released on this occasion, there is the Next.js live that it is used for collaboration on real time, support multiple users, and lets you commit on real-time and see the changes, you can check more at vercel live.

Next.js analytics

Next.js analytics is another tool to help you check you core web vitals health; it enables automotive testing for performance and reliability on every pull request. You can even add in plugins like vercel checkly to monitor you web vitals on each deployment on Vercel platform. To learn more check vercel website link.