Guillermo Rauch, CEO of Vercel and co-creator of Next.js, started off the conference with a keynote talk. Guillermo announced Next.js version 12, the biggest release ever. Guillermo highlighted the following features of Next.js 12.
A new Rust-based compiler
Next.js 12 uses a Rust compiler built with SWC, which stands for Speedy Web Compiler. It's an open platform for fast tooling. This compiler improves both local and production environments. This new Rust-based compiler achieves around 5 times faster builds and around 3 times faster Hot Module Replacement (or HMR).
Zero code updates are required to benefit from these improvements. Simply update your Next.js app to version 12 to begin enjoying the benefits of this new compiler.
Next.js 12 includes experimental support for URL Imports. This allows developers to use any package directly via a URL. There is no install or build step required. Remote resources can be processed exactly like local dependencies.
Middleware & Edge Functions
Over the past few years, Next.js has provided tremendous support for serverless deployments, thereby eliminating the DevOps burden for developers. Next.js continued on this mission by introducing middleware and edge functions on Vercel serverless deployments.
Next.js middleware allow developers to run code before a request is completed. The response to an incoming request can be modified by rewriting, redirecting, adding headers, or streaming HTML. This allows middleware to be used for things like authentication, feature flags, A/B testing, logging, server-side analytics, and more.
Next.js middleware provide the same flexibility on serverless platforms that is available with traditional web servers. Next.js middleware support Web APIs like
fetch and they work out of the box in Next.js 12, or deployed as edge functions on Vercel.
Edge functions allow developers to run code close to their users. Vercel now supports edge functions for all users on their platform. It's important to note that other hosting providers can also be configured to support middleware at the edge, and not just Vercel.
Multi-region deployment is often avoided due to cost and complexity. With edge functions, server-side logic can now be moved to the Edge, close to the geographic location of the website visitor. This results in improved loading times for visitors, no matter where they visit from.
As developers, we typically serve dynamic content for visitor personalization reasons and serve static content for faster load times. However, with a Next.js middleware deployed as an edge function, dynamic content can be served at the speed of static content.
Edge functions help to solve the common issues with serverless deployments because they boot up instantly, deploy globally, and support streaming data.
The future of React
Next.js 12 brings the future of React to Next.js. It includes experimental support for React 18 and React server components. It was reassuring to hear how closely Next.js is working with the React team to prepare Next.js for React 18, server-side streaming, and React server components.
React server components
React server components allow individual components to be rendered on the server-side. It's different from Server-Side Rendering (SSR), which pre-generates the HTML of an entire web page on the server. Server-Side Rendering renders all the HTML on the page or nothing at all. With React server components, a web page can progressively update at the component level as data comes in.
With React server components, data fetching can be done at the component level. This simplifies things, because
getStaticProps will no longer be needed. This aligns more closely to the React hooks model, which advocates for combining data fetching with components.
Using server components
React server components can be used in Next.js 12 with an experimental flag. To try out React server components, we can simply give any page a
.server.ts suffix. Client-side rendered components can be used within the server component. These client components will hydrate and become interactive when the server component is rendered. This can be useful for adding client-side functionality to a page, like upvoting and downvoting behaviors.
Benefits of server components
Granular component caching
The Next.js team showcased a new exploration that is currently underway using a new
Data component that works like a React suspense boundary. This new component supports granular component caching. It's similar to Incremental Static Regeneration (ISR).
Last year, Next.js announced Next.js Analytics to help monitor web vitals. Since then, it has seen amazing adoption, processing over 7 billion data points.
This year, Next.js announced Checks, automated performance checks that start automatically and report results when a deployment finishes.
A preview deployment is checked to ensure that there are no runtime errors and that good performance makes its way into production. This is all thanks to the end-to-end reliability checks and Web Vitals performance checks that are done.
During the conference, we learned about the evolution of Next.js Live, which was presented at last year's Next.js Conf. Next.js Live provides an instant development and real-time collaboration experience for Next.js. All it takes to collaborate with Next.js Live is a link. Next.js Live makes it possible to code, chat, draw, and edit, directly from a web browser.
Next.js Live now provides new Git integrations. Next.js Live runs natively in web browsers, and now boots up instantly thanks to innovations like ES Modules and Web Assembly, which the new compiler takes advantage of.
Next.js 12 Overview
Developer Experience of the Future by Lee Robinson. Learn more about the features included in Next.js 12.
Next.js at the Edge by Suzanne Aldrich and Lee Robinson. Learn more about Edge functions with Next.js and Vercel.
Edge Functions Explained by Kelsey Hightower and Lee Robinson. See a demo of edge functions and learn how they're different from the traditional way of building for the web.
Next.js and databases
Next.js and Prisma: Databases in Serverless Made Easy by Daniel Norman. Learn how Prisma makes building database-driven applications with Next.js a breeze.
Streaming in Next.js by Kara Erickson. Learn about the benefits of streaming with Next.js.
Getting Started with Next.js by Delba de Oliveira. Learn the fundamentals of React and Next.js.
To view all the talks that were part of Next.js Conf 2021, visit the Vercel YouTube page.