If a page has Dynamic Routes and uses getStaticProps, it needs to define a list of paths to be statically generated.

When you export a function called getStaticPaths (Static Site Generation) from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.

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

Note thatgetStaticProps must be used with getStaticPaths, and that you cannot use it with getServerSideProps.

The getStaticPaths API reference covers all parameters and props that can be used with getStaticPaths.

You should use getStaticPaths if you’re statically pre-rendering pages that use dynamic routes and:

• The data comes from a headless CMS
• The data comes from a database
• The data comes from the filesystem
• The data can be publicly cached (not user-specific)
• The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance

getStaticPaths only runs at build time on server-side. If you're using Incremental Static Regeneration, getStaticPaths can also be run on-demand in the background, but still only on the server-side.

getStaticPaths can only be exported from a page. You cannot export it from non-page files.

Note that you must use export getStaticPaths as a standalone function — it will not work if you add getStaticPaths as a property of the page component.

In development (next dev), getStaticPaths will be called on every request.