Next.js 8

Next.js 8 introduces Serverless Mode, smaller bundles, performance improvements, and more.

We are proud today to introduce the production-ready Next.js 8, featuring:

As always, we have strived to ensure all these benefits are completely backwards compatible. For most Next.js applications, all you need to do is run:

npm i next@latest react@latest react-dom@latest

We are thankful to our community and everyone who has bet on our success. Since our last blog post, we have seen companies like AT&T, Starbucks and Twitch relaunch their public-facing websites and apps with Next.js.

Serverless Next.js

Serverless deployment dramatically improves reliability and scalability by splitting your application into smaller parts (also called lambdas). In the case of Next.js, each page in the pages directory becomes a serverless lambda.

There are a number of benefits to serverless. The referenced link talks about some of them in the context of Express, but the principles apply universally: serverless allows for distributed points of failure, infinite scalability, and is incredibly affordable with a “pay for what you use” model.

To enable serverless mode in Next.js, add the serverless build target in next.config.js:

// next.config.js
module.exports = {
  target: "serverless",
};

The serverless target will output a single lambda per page. This file is completely standalone and does not require any dependencies to run:

The signature of the Next.js Serverless function is similar to the Node.js HTTP server callback:

export function render(req: http.IncomingMessage, res: http.ServerResponse) => void

Next.js provides low-level APIs for serverless deployments as hosting platforms have different function signatures. In general you will want to wrap the output of a Next.js serverless build with a compatibility layer.

For example if the platform supports the Node.js http.Server class:

const http = require("http");
const page = require("./.next/serverless/about.js");
const server = new http.Server((req, res) => page.render(req, res));
server.listen(3000, () => console.log("Listening on http://localhost:3000"));

Summary

Massive build-time memory usage reduction

We have contributed to webpack to improve Next.js’s (and the rest of the webpack ecosystem’s!) build performance and resource utilization.

This effort has resulted in up to 16 times better memory usage with no degradation in performance.

Memory gets released much more quickly and processes don’t crash anymore under lots of stress (many pages).

Build-time environment configuration

While reviewing Next.js applications an often reoccurring pattern we observed was adding babel-plugin-transform-define or webpack.DefinePlugin to provide configuration values to the application.

With Next.js 8 we are introducing a new key to next.config.js named env to provide the same functionality in a backward compatible way:

// next.config.js
module.exports = {
  env: {
    customKey: 'MyValue'
  }
}

This will allow you to use process.env.customKey in your code. For example:

// pages/index.js
export default function IndexPage() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}

process.env.customKey will be replaced with ‘MyValue’ at build time.

Prefetch performance improvements

The Next.js router allows you to prefetch pages for faster navigation:

import Link from 'next/link'

export default function IndexPage() {
  return <>
    <Link href="/about" prefetch>
      <a>To About Page</a>
    </Link>
  </>
}

It works by prefetching the Javascript bundle of every link that has a prefetch attribute.

In versions before Next.js 8 this would mean injecting a