From the course: Next.js: Creating and Hosting a Full-Stack Site

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Loading individual products

Loading individual products - React.js Tutorial

From the course: Next.js: Creating and Hosting a Full-Stack Site

Start my 1-month free trial Buy for my team

Loading individual products

“

- [Instructor] All right, so now that we've done the product list page, the next page that we're going to add fetching functionality to is going to be the product detail page. Now, this page is going to be a little bit trickier, mostly just because we now have this route parameter to deal with, right? Telling us which product we should actually load. But as you'll see, it fits right in with the flow that we just learned about using that fetch function. So what we're going to do here is, first of all, we'll remove this products thing because we don't need that anymore, and then we're going to remove this products.find function because we don't need that either. What we're going to do is we're just going to say const product equals, and here's where we're going to use the fetch function again. We're going to say await fetch. And that reminds me we need to also add the async keyword to this component function. And then we're going to load from /api. I'll add the URL later. /api/products,…

Contents