Why do we only need getStaticPaths() when we use getStaticProps?

Question

If we have a dynamic route

[id].js

function id() {
  return <h1>Hello World</h1>
}
export default id

and we build the static pages with npm run build, the result is the [id].html page. Any route with /something will work and displays Hello World.

But if we generate the content of the page dynamically by using the return value of getStaticProps() in the component:

function id(props) {
  const { test } = props
  return <h1>{test.foo}</h1>
}
export default id

Then we need getStaticPaths() again to specify the possible routes.

Why do we only need getStaticPaths() when we use getStaticProps?

Answer 1

The nextjs docs put it simply:

If a page has Dynamic Routes and uses getStaticProps, it needs to define a list of paths to be statically generated.

getStaticPaths is required for dynamic SSG pages because that how Vercel decided to make it.

---

If you want to use getStaticProps while maintaining the behavior of not requiring predefined routes from getStaticPaths, you can use fallback: true to tell nextjs to render routes even if they are not predefined by getStaticPaths.

You can send an empty array of paths and set fallback: true:

export async function getStaticPaths() {
  const paths = [];
  return { paths, fallback: true };
}

This will result in all routes still being accessible, like the behavior from the first part of your question. Here's a full example on codesandbox. In the example, try going to /test/any-route-you-want and note that the route will still be rendered: