Headless CMS content
Dynamic Pages Router pages use identifiers from a CMS to determine which URLs to prerender.
Next.js 16+ · Type Alias
GetStaticPaths
getStaticPaths defines dynamic Pages Router paths for static prerendering. It is deprecated for App Router usage, where generateStaticParams is the replacement.
How it works
getStaticPaths is a Pages Router API for declaring dynamic URLs that Next.js should prerender. It returns route parameter objects and a fallback policy, and must be paired with getStaticProps; App Router projects use generateStaticParams instead.
Syntax
export async function getStaticPaths() {
return {
paths: [{ params: { id: '1' } }],
fallback: false,
}
}Parameters
| Name | Type | Description |
|---|---|---|
| | No positional parameters; the exported function reads external data or application state to construct its result. |
Returns
An object containing the required paths array and fallback setting; each path can include a params object matching the dynamic route segments.
Key points
- Export it from a dynamic Pages Router page to define statically generated route instances.
- The
pathsproperty lists the URLs Next.js will generate ahead of requests. - Parameter keys must match the dynamic segment names in the page filename.
- Use it to choose build-time generation rather than leaving every page to on-demand generation.
- A headless CMS is one suitable source for determining the route list.
- A database can provide the records used to construct dynamic paths.
- Filesystem content can also determine which dynamic pages exist.
Common mistakes
- This is a Pages Router API, not an App Router API, and it cannot be used alone; pair it with
getStaticProps. - Production execution occurs at build time, so it is not a runtime request handler.
- With
fallback: false, an unlisted dynamic path produces a 404.
Example: Generate dynamic Pages Router paths
import type { GetStaticPaths } from 'next'
export const getStaticPaths: GetStaticPaths = async () => {
const posts = await fetch('https://api.vercel.app/blog').then((res) => res.json())
return {
paths: posts.map((post: { id: number }) => ({
params: { id: String(post.id) },
})),
fallback: 'blocking',
}
}
This Pages Router example derives dynamic route parameters from external data and enables on-demand generation for paths not produced at build time.
When to use it
Database-backed routes
Database records provide the IDs or slugs for generated dynamic pages.
Filesystem-backed routes
Markdown or other local files determine the available dynamic URLs.
On-demand generation
A site wants unknown dynamic pages generated only when requested.
Interview questions
QWhat does getStaticPaths do?
It exports the set of dynamic route paths that should be statically prerendered. The return value includes paths and a fallback setting, and the API is used with getStaticProps.
Follow-up: How would you support paths that are not known at build time? Return an appropriate fallback mode, such as 'blocking', so the requested page can be generated on demand.
QWhat shape must the paths entries have?
Each item in paths supplies route parameters under params. Those parameter names must correspond to the dynamic segments in the page filename, such as id for pages/posts/[id].js.
Follow-up: How do catch-all routes differ? Their matching parameter value is an array representing the route segments rather than a single scalar value.
QWhen does getStaticPaths run?
In production, the function runs during the build and the returned paths are rendered to HTML then. In development, it runs on every request, which supports a faster feedback loop.
Follow-up: What replaces this API in the App Router? generateStaticParams serves the corresponding role for routes under app.
Related
getStaticPropsgenerateStaticParamsfallbackDynamic Routes