Use Next.js Dynamic Routes to Create Product Pages for an Online Store
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.
Until now, I know how to use getStaticPaths & getStaticProps. Thanks Mate ~~
Until now, I know how to use getStaticPaths & getStaticProps. Thanks Mate ~~ @dameng no problem, glad it helped!
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.
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?
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().
Oops! Just kidding, I figured it out. I accidentally placed my products directory in api/ instead of pages/.