Static Generation of Dynamic Routes

Overview

We’ve already seen how to statically generate a statically routed page, but now the question is: How can we statically generate dynamically routed pages?

To statically generate dynamic routes, we need a list of all possible paths for that dynamic route so that those pages can be prerendered during build time. For that, Next.js provides another out-of-the-box function named getStaticPaths().

Statically generating dynamic routes

Let’s talk a little about the getStaticPaths() function. Similar to getStaticProps(), it’s also an asynchronous function that comes with Next.js. The purpose of this method is to tell the Next.js compiler the list of possible paths a dynamic route can take during build time.

The getStaticPaths() function works together with the getStaticProps() function in dynamic routes to prerender the pages. Let's take a look at the syntax of the getStaticPaths() and getStaticProps() functions working together: