Skip to content

How do I reduce my build time with Next.js on Vercel?

A Deployment on Vercel can take a considerable amount of time to build, depending on the size of your project and actions executed at build time. If this time exceeds the maximum build time of 45 minutes, the deployment will fail on Vercel even if it was built successfully on your local machine. This failure is present in the build logs. This article provides strategies for dealing with this issue in the case of a Next.js project.

Decreasing the build time of your project

Using ISR + fallback: true/blocking

With ISR (Incremental Static Regeneration) + fallback: true or fallback: blocking, you can reduce your build time to generate all your static pages by offloading the static page generations to happen at runtime. ISR will enable you to regenerate static pages without redeploying your project, and fallback: true/blocking will allow you to generate new static pages at request.

You can find examples of ISR + fallback here.

Using SSR

With SSR (Server-side rendering) — like fallback: true/blocking — you can reduce your build time by requesting a server-side rendered page at request time. This is especially true when you combine multiple static pages into a single, dynamic, server-side rendered page.

Using a middleware server with caching

Instead of directly querying the upstream provider (e.g. your database provider), you can reduce your build time by using a middleware server with caching. Once queries to your upstream provider are cached, subsequent queries will be fast, thereby reducing the time it takes to finish these queries when building your static pages.

An example of a middleware server is the Appollo GraphQL server where the in-memory cache can be configured as described here.

Updated March 1st 2022