Use Next.js Dynamic Routes to Create Product Pages for an Online Store

InstructorColby Fayock

Share this video with your friends

Send Tweet

We'll create individual pages for each product using dynamic routes and statically generated pages. We'll do this by taking advantage of Next.js's ability to create dynamic routes and the use of getStaticPaths as well as the getStaticProps functions to create a unique page for each product.

To start we'll update the product page to a dynamic route using the bracket notion in our filesystem ([param]).  Import products JSON document and create static paths using the getStaticPaths function. Proceed to configure static product props using path parameter with the getStaticProps function. And finally, use the global cart state to add products to the shopping cart.

dameng
~ 4 years ago

Until now, I know how to use getStaticPaths & getStaticProps. Thanks Mate ~~

Colby Fayockinstructor
~ 4 years ago

Until now, I know how to use getStaticPaths & getStaticProps. Thanks Mate ~~ @dameng no problem, glad it helped!

~ 4 years ago

I've followed the videos and coded along and they've been awesome. On video 13, I see that you added a new folder and file as '/pages/products/productId' and loaded the file content in the browser. But I did the same and typed http://localhost:3000/products/productId in my browser, I get a 'page not found error'. Did some troubleshooting but no success. Can you please show me how to resolve this and move forward. Thanks.

Colby Fayockinstructor
~ 4 years ago

I've followed the videos and coded along and they've been awesome. On video 13, I see that you added a new folder and file as '/pages/products/productId' and loaded the file content in the browser. But I did the same and typed http://localhost:3000/products/productId in my browser, I get a 'page not found error'. Did some troubleshooting but no success. Can you please show me how to resolve this and move forward. Thanks.

hey there, do you happen to have the code that I can look at on GitHub, Code Sandbox, or something similar? the Next.js filesystem routing should definitely work! just looking at what you added as "new file", did you include a .js at the end?

~ 3 years ago

Hello, I'm getting a 404 when trying to get to http://localhost:3000/products/productId. I'm also not getting anything in the terminal when trying to console.log within getStaticProps() or getStaticPaths().

~ 3 years ago

Oops! Just kidding, I figured it out. I accidentally placed my products directory in api/ instead of pages/.