Improving build times with Vercel (Next.js)

There could be various reasons why the build times are high. However, some ways through which we can identify the cause of the longer build times are as follows:

Generating Static Pages On-Demand

getStaticPaths allows you to control which pages are generated during the build. The paths 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.

// pages/posts/[id].js

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 }

}

Updating Content without Redeploying

Incremental Static Regeneration:

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.

// pages/api/revalidate.js

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');

  }

}

Optimising Images On-Demand

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 optimised on demand, keeping your build times fast and improving your page load performance and Core Web Vitals. This helps your team get great performance by default and keeps building fast.