What's new in Next.js 12?

Developers November 8, 2021

Storyblok is the first headless CMS that works for developers & marketers alike.

During the Next.js Conf 2021 several speakers spoke about interesting projects using the features that Next.js offers to the developers. If you want to read more about the conference, go to this recap article on Storyblok's blog.

In addition to the case studies and educational talks, the Vercel crew presented a new and powerful version of the framework: Next.js 12.

Here are some of the improvements and new features that Next.js 12 offers to create and improve your web applications:

Rust Compiler

Next.js compiler moved from using Babel to a new one built on SWC, written in Rust. Using native compilation, this new compiler offers five times faster builds and three times faster refreshes (when working locally), especially when using large Next.js code bases. You can set the Rust compiler to also apply minification, seven-time faster than the current process.

If you are using a custom configuration for Babel in your Next.js project, don't worry: the new compiler maintains backward compatibility.

Middleware

A middleware enables developers to catch an HTTP request and run some code and logic before it is completed. Having middleware in a web application is not new. You can see a similar concept being used in other programming languages, or even JavaScript frameworks like Express.js.

What is cool about having a middleware in Next.js 12 is that we can combine it with other features offered by the framework. Now we have the benefits of a static website, created using getStaticProps, as well as the ability to generate dynamic and personalized data on the fly, catching the requests with a middleware.

To implement a middleware, create a file called _middleware.js inside the directory that contains the routes that you want to intercept. If you want to create a middleware that manages all the pages of your web application, you should create the file in /pages/_middleware.js.

/pages/_middleware.js

        
      import { NextResponse } from "next/server";
   
const secretKey = "preview-mode";

export function middleware (request) {
  const headerKey = request.headers.get("secret-key");

  if (headerKey === secretKey) {
    return NextResponse.next();
  }

  return new Response(null, { status: 401 });
}

You can use a Middleware for different use cases: Redirect/Rewrite, authentication, localization, logging, A/B testing, etc.

Middleware uses a runtime that supports standard Web APIs. If you want to implement a middleware in your Next.js application, you should run it locally using next start, or host it on Edge platforms like Vercel, using the brand new Edge Functions.

Vercel Edge Functions are serverless functions, like AWS Lambda or Azure Functions, except that they are deployed in CDNs, close to the end users, enabling your web application to work faster. You can see many examples of Edge Functions here.

React 18 support

Next.js 12 adds early support for React 18, even before it's officially released. You can now use experimental features like Suspense, React.lazy, or APIs like startTransition, in your Next.js applications.

With support for React concurrent mode, you can now use server-side Suspense and SSR streaming

There are also React Server Components. With server-side rendering, you are pre-generating HTML in the server; with React Server Components, the server generates the components instead. So you get the best of both worlds for a better user experience: server-rendering and client-side interactivity. React Server Components also support data fetching at the component level, so you won't need to use functions like getServerSideProps or getStaticProps. Read more about React Server Components here.

ES Modules

Next.js 12 also adds support for ES Modules. You now have the advantage of a standardized module system for JavaScript in your Next.js applications. ES Modules are supported by the most used web browsers, and also by Node.js.

        
      import { StoryblokModule } from "./modules/storyblok.js";

URL Imports

As an experimental feature, Next.js 12 supports URL imports. No need to install NPM packages or run a build process. You can import any package using a remote URL as if it were a local dependency.

        
      import { StoryblokExample } from "https://www.storyblok.com/example";
import { esModule } from "https://www.storyblok.com/example/example.js";

Conclusion

Next.js 12 opens the door to new possibilities for your web projects. By improving existing processes and functionalities, and adding new features to the framework, frontend developers now have more tools to create better user experiences in an efficient way.

Are you working on a project using Next.js 12 and Storyblok? Share your experience with us!