In modern front-end development, many frameworks are competing with each other to be faster, more efficient, and provide a rich set of features that will benefit both developers producing the front-end and end users consuming the front-end. The recent release of Next.js 12 from Vercel at last week's Next.js Conf should appeal to both sets of user groups, thanks to a selection of new features and build optimisations.

For any front-end framework which offers static site generation capabilities, such as Gatsby, Eleventy, Nuxt.js, or indeed Next.js, performance is essential. These frameworks need to be able to build content fast, especially when integrated with a data source such as a content management system (CMS) which may contain thousands of records. Next.js already uses Incremental Static Regeneration to only update the content which has changed, but the latest release goes a step further by introducing a more performant compiler, making builds up to 5 times faster than Next.js 11. This compiler is enabled by default, giving Next.js excellent build performance straight out of the box. Developers benefit from these changes too, as any edits to a Next.js page will be reflected in the local browser much quicker, thanks to the fast refresh feature.

Many server-side frameworks, such as .NET, have the concept of middleware - that is, where an incoming request to a web application can run through a number of layers of code to perform a distinct piece of business logic. For example, a request may need to run through authentication middleware to ensure that the user is entitled to access a resource, and logging middleware to log the incoming request and the outgoing response. This concept is now available in Next.js 12, allowing incoming requests to run through layers of middleware written in JavaScript/TypeScript. However, when hosted on Vercel, this middleware will run on Vercel's Edge Network, meaning that the request will reach the middleware much sooner than if it were hosted on a single server in a data centre. Again, performance very much at the forefront of this release.

Closer integration between Next.js and design platforms has been introduced through the new feature of URL imports. This allows components to be designed by a designer in a design tool, and then, assuming the design tool supports it, instantly imported by a developer as a React component in a Next.js page through a URL. No longer does the designer need to explicitly export the component from the design tool and then the developer need to import into the front-end. This minimises any friction between design tools and developer tools when collaborating on a given task. Note that this feature is currently experimental.

Finally, Next.js 12 lays some foundations ahead of the release of React 18. This release provides a number of features which are in line with the core concepts of Next.js, including the ability to render entire pages on the server with React Server Components. This means that pages developed in React can be served by Next.js as fully-generated HTML pages with minimal or no JavaScript sent to the client browser. This has benefits both for performance and for situations where JavaScript cannot be guaranteed on the client browser. Ahead of the full release of React 18, these experimental features can already be enabled in Next.js by installing the Alpha version of React 18 and setting an experimental flag in the configuration.

The ethos of providing performance in production together with a seamless developer experience takes Next.js 12 to the top level of front-end development. There will inevitably be comparisons between these features in Next.js and similar frameworks, each of which has its own strengths and weaknesses. In addition, Vercel has cost implications. Although free for non-commercial sites, hosting in Vercel is not free for commercial sites, starting at $20 per month per "team member".

For full details of Next.js 12, the keynote is available on YouTube.