Next.js › Pages Router Data Fetching (getStaticProps, getServerSideProps & getStaticPaths)

How does getStaticPaths work together with getStaticProps for dynamic routes in the Pages Router?

Intermediate

Answer

getStaticPaths tells Next.js which dynamic route parameter values should be pre-built into static pages at build time, returning a list of paths, while getStaticProps then runs separately for each of those paths to fetch the actual data needed to render that specific page.

// pages/products/[id].js
export async function getStaticPaths() {
  const products = await getAllProducts();
  const paths = products.map(p => ({ params: { id: p.id.toString() } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const product = await getProduct(params.id);
  return { props: { product } };
}

Real-world example An online catalog uses getStaticPaths to list every product id that should be pre-built at build time, with getStaticProps then fetching the specific details for each of those individual product pages.

Common follow-ups: What does the fallback option in getStaticPaths actually control?;What happens when a user visits a path not included in getStaticPaths?

Dynamic Routes & Catch-All Segments;Rendering (SSR/SSG/ISR)