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'
};
}
getStaticPaths
must be used with getStaticProps
. 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:
getStaticProps
generates HTML
and JSON
files, both of which can be cached by a CDN for performancegetStaticPaths
will only run during build in production, it will not be called during runtime. You can validate code written inside getStaticPaths
is removed from the client-side bundle with this tool.
getStaticProps
runs during next build
for any paths
returned during buildgetStaticProps
runs in the background when using fallback: true
getStaticProps
is called before initial render when using fallback: blocking
getStaticPaths
can only be exported from a dynamic route that also uses getStaticProps
. You cannot export it from non-page files e.g. from your components
folder.
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.
For more information on what to do next, we recommend the following sections: