Stable Incremental Static Regeneration

To get the best of both worlds, Next.js introduced Incremental Static Generation, updating static content after you have already built your site. By using the fallback: true option in getStaticPaths, you can register new static pages at runtime.

Next.js can statically pre-render an infinite number of pages this way, on-demand, no matter how large your dataset is.

Today, we are announcing the general availability of Incremental Static Re-generation, which is a mechanism to update existing pages, by re-rendering them in the background as traffic comes in.

Inspired by stale-while-revalidate, background regeneration ensures traffic is served uninterruptedly, always from static storage, and the newly built page is pushed only after it's done generating.

1export async function getStaticProps() {
2  return {
3    props: await getDataFromCMS(),
4    // we will attempt to re-generate the page:
5    // - when a request comes in
6    // - at most once every second
7    revalidate: 1,
8  }
9}
 

Unlike traditional SSR, Incremental Static Regeneration ensures you retain the benefits of static:

• No spikes in latency. Pages are served consistently fast.
• Pages never go offline. If the background page re-generation fails, the old page remains unaltered.
• Low database and backend load. Pages are re-computed at most once concurrently.

Both incremental features (adding pages and lazily updating them), as well as preview mode, are now stable and already fully supported by both next start and the Vercel edge platform out of the box.

Customizable Base Path

Next.js projects are not always served from the root a domain. Sometimes you might want to host your Next.js project under a subpath like /docs so that the Next.js project only covers that subsection of the domain.

While this has been possible so far, it was at the expense of quite a bit of extra configuration. For example, adding the prefix to every single <Link> and making sure Next.js was serving the JavaScript bundles from the right path.

Rewrites

To address this pain point, we're introducing a new configuration option. basePath allows you to easily host your Next.js project on a subpath of your domain.

To get started using basePath you can add it to next.config.js:

next.config.js
module.exports = {
  basePath: '/docs',
}
 

Redirects

Using next/link in this way will result in the following HTML rendered to the web browser:

<a href="/docs/documentation-page">Documentation page</a>