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

Next.js provides flexibility to control your build times. This includes prerendering static pages, generating and optimizing images, and updating your content from a headless CMS or database.

This guide will explain a few strategies to decrease your build times.

getStaticPaths allows you to control which pages are generated during the build. The paths that you include will be generated at build time, while the rest of the pages can be generated on demand using fallback.

You can significantly decrease your build times by not pre-rendering any pages during the build and instead generating all static pages on demand. When deployed to Vercel, you can further extend this by pre-rendering pages for only production builds.

This keeps your iteration cycles fast for small changes but opts for longer production builds to pre-render your static pages. This flexibility is helpful for sites with hundreds/thousands of static pages.

export async function getStaticPaths() {
  // When this is true (in preview environments) don't
  // prerender any static pages
  // (faster builds, but slower initial page load)
  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    return {
      paths: [],
      fallback: 'blocking',
    }
  }

  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts?sort=date-desc&limit=10')
  const posts = await res.json()

  // Get the paths we want to prerender based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // { fallback: false } means other routes should 404
  return { paths, fallback: false }
}

Learn more about getStaticPaths.

Incremental Static Regeneration (ISR) allows you to create or update content without redeploying your site. ISR has three main benefits for developers: better performance, improved security, and faster build times.

• Better Performance: Static pages can be consistently fast by caching generated pages in every region on Vercel's Edge Network and persisting files into durable storage.
• Improved Security: ISR Render Functions are used to generate pages and do not have access to the incoming request, which prevents accidental caching of user data for increased security.
• Faster Builds: Pages can defer generation on request or through an API instead of during the build, helping keep build times fast as your application grows.

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    await res.revalidate('/post/1');
    return res.json({ revalidated: true });
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating');
  }
}

Learn more about Incremental Static Regeneration.

Next.js provides an image component that helps ensure images are loaded as efficiently and fast as possible. When deploying to Vercel, images are automatically optimized on demand, keeping your build times fast as well as improving your page load performance and Core Web Vitals. This helps your team get great performance by default and keeps builds fast.

Learn more about Image Optimization on Vercel.

Try out Next.js to Vercel to experience the fastest builds. We recently made builds 40 seconds faster on average for large projects.