Vercel released Next.js 12 at Next.js Conf on October 26th, 2021, and according to Vercel Next.js 12 is one of Vercel's biggest releases ever. It offers a lot of cool features.

Here are the new features which Next.js 12 offers us.

• Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds
• Middleware (beta): Enabling full flexibility in Next.js with code over configuration
• React 18 Support: Native Next.js APIs are now supported, as well as Suspense
• <Image /> AVIF Support](nextjs.org/blog/next-12#smaller-images-usin..): Opt-in for 20% smaller images
• Bot-aware ISR Fallback: Optimized SEO for web crawlers
• Native ES Modules Support: Aligning with the standardized module system
• URL Imports (alpha): Import packages from any URL, no installs required
• React Server Components (alpha): Try it today, including SSR streaming

Let's take a look at them in details.

Rust Compiler

Nextjs 12 includes a brand new Rust compiler that takes advantage of native compilation. Rust compiler is built on SWC, an open platform for the next generation of fast tooling and it is optimized bundling and compiling with ~3x faster refresh locally and ~5x faster builds for production. You don't need to know Rust to be able to use Next.js its just that Nextjs 12 will use Rust to compile the code and it will make the compilation 17x faster than Babel which were used in earlier versions of Nextjs.

Read more about it here.

Middleware functions

Using Middleware functions you can easily run code before a request is completed. Based on the user's imcoming request you can modify by rewritting, redirecting, adding headers or even streaming HTML.

Middleware can be used for anything that shares logic for a set of pages, including:

Middleware uses a strict runtime that supports standard Web APIs like fetch. This works out of the box using next start, as well as on Edge platforms like Vercel, which use Edge Functions.

To use a Middleware function, you can create a file as "_middleware.js" inside the "pages" folder.

Since we have created the middleware in "pages/_middleware.js" so it will run on all routes within "/pages" directory. If we had created a middleware in "/pages/users/_middleware.js" then that middleware would run only for the routes present "/pages/users" in directory. You can read about middleware in Next.js 12 here

Here is a Github repo where you can see more examples of Middleware functions of Next.js 12.

React 18 Support

React 18 will add features like Suspense, automatic batching of updates, APIs like startTransition, and a new streaming API for server rendering with support for React.lazy.

You can try out those features using the command below in Next.js 12

npm install react@alpha react-dom@alpha

Server-Side Streaming

Concurrent features in React 18 include built-in support for server-side Suspense and SSR streaming support. This allows you to server-render pages using HTTP streaming. This is an experimental feature in Next.js 12, but once enabled, SSR will use the same strict runtime as Middleware.

To enable, use the experimental flag concurrentFeatures: true

React Server Components

React Server Components allow us to render everything, including the components themselves, on the server. This is fundamentally different from server-side rendering where you're pre-generating HTML on the server. With Server Components, there's zero client-side JavaScript needed, making page rendering faster. This improves the user experience of your application, pairing the best parts of server-rendering with client-side interactivity.

Next.js now enables you to do data fetching at the component level, all expressed as JSX. By using React Server components, we can simplify things. Special functions like getServerSideProps or getStaticProps are no longer needed. This aligns with the React Hooks model of collocating data fetching with your components.

You can rename any Next.js page to .server.js to create a Server Component and import client components directly inside your Server Components. These client components will hydrate and become interactive, so you add functionality like upvotes. Read more about it here

URL Imports

Nextjs 12 includes experimental support where you can import ES Modules throught URLs. You don't need to install the package and no build step is required.

Now you can use any package directly through a URL using URL imports. This allows Next.js to handle distant HTTP(S) resources in the same way that local dependencies are handled.

Next.js will build a next.lock file to track remote resources if a URL import is detected. URL imports are cached locally so you can continue to work even if you're offline. Both client and server URL imports are supported by Next.js.

To opt-in, add the allowed URL prefixes inside next.config.js:

Then, you can import modules directly from URLs:

Smaller Images using AVIF

AVIF pictures are now supported by the built-in Image Optimization API of Next.js and it allows for 20% smaller images than WebP.

Because AVIF pictures take longer to optimize than WebP photos, so Next.js team made this functionality opt-in for the new images property in next.config.js:

Here this list format is used to detemine the optimised image format from the request's Accept header. Since AVIF is first so it will serve the image in AVIF format if browser supports AVIF. Othwewise WebP will be served if the browser support WebP. If neither format is supported then the original image format will be served.

Output file tracing

The target option was first added in Next.js 8. By bundling all dependencies using webpack during the build, it was possible to export Next.js pages as separate JavaScript bundles. We immediately realised this wasn't great, so we made @vercel/nft instead. @vercel/nft has been used on all Vercel platform deployments for over two years.

These enhancements are now included by default in the Next.js framework for all deployment platforms, giving a major improvement over the target option.

Next.js 12 uses @vercel/nft to automatically trace which files are required by each page and API route, and displays the trace results with the next build output, allowing integrators to take advantage of the traces Next.js offers.

There are few other new improvements as well. Here is the link of the Next.js 12 documentation to read more about it.

You can watch the Next.js conf in YouTube by clicking here

As always, thanks for reading! If you stumbled with any questions or issues throughout this article, let me know in the comment section. Thus, I can update and improve the article if needed. I appreciate any feedback!