What can I do when I run into build output limits with Next.js on Vercel?

You might have learned about Next.js' static data-fetching properties and immediately proceeded to create a new static site that reads from CMS entries.

For larger sites, you may have run into a limit that mentioned exceeding the maximum number of build outputs. Read on to learn how you can work within the constraints of platform limitations.

Fallback Pages

If you have a large number of pages that need to get generated (more than 1000), it's worth considering the option of rendering a fallback page and lazily building pages on-demand as they are requested.

This will not only minimize the number of initial build outputs, but it can also significantly speed up your builds. In your getStaticPaths function, you can add fallback: true to the returned object as shown below:

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } } 
    ],
    fallback: true or false 
  };
}

Enabling the fallback option will initially show your site visitors a loading state that you can customize while rendering your page in the background. Once the page is rendered, it will be persisted and cached for all your future visitors.

You might be concerned that this may negatively impact your SEO, but modern search engines are sophisticated enough to understand JavaScript and are able to crawl the content accordingly. If you prefer to delay the entire response until your page has been fully rendered, you can use the blocking option by returning fallback: 'blocking' instead of fallback: true.