0

I'm using NextJS to build a frontend for a database which currently has few thousand products and this number is expected to grow by a lot. So, my site/products/ route works fine. I want to add a route to view individual products like site/products/{sku}. I created a dynamic route with a dummy component and expected it to work but it I was constantly getting 404 error.

On some research I found that to facilitate dynamic routing, the page component should make use of the getStatiPaths and getStaticProps to pre-render all the pages so that they can be served.

This behavior would've been useful for a blog, but in my case I don't want to generate few thousand pages everytime I do a npm run build. I want to be able to make an API call with the sku value I get from the url and generate the page dynamically on the client or better yet do this on the server and send the rendered html to the client.

How do I achieve this, is my thinking wrong in this?

Amol Borkar
  • 2,321
  • 7
  • 32
  • 63
  • https://stackoverflow.com/questions/61222726/dynamic-routing-with-getserversideprops-in-nextjs/61240697#61240697 – Yilmaz Apr 01 '23 at 18:48

1 Answers1

0

This is exactly what the fallback property of the object returned by getStaticPaths is for:

  • The paths that have not been generated at build time will not result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request [...]
  • In the background, Next.js will statically generate the requested path HTML and JSON. [...]
  • At the same time, Next.js adds this path to the list of pre-rendered pages. Subsequent requests to the same path will serve the generated page, like other pages pre-rendered at build time.
kca
  • 4,856
  • 1
  • 20
  • 41