Static Generation of Dynamic Routes
Learn how to statically generate dynamically routed files in Next.js.
We'll cover the following
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:
Get hands-on with 1200+ tech skills courses.