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,700 courses taught by industry experts.

Loading all products

Loading all products

- [Instructor] All right, so now that we know the basics of using this fetch function in order to load data from our route handlers in Next.js into our pages, let's start doing this with some of our actual pages on our site. So the first one that we're going to do here is the products list page. So let's just open that page up here. We're going to go into, here it is, products, and then page.tsx. And here's how we're going to do this. We're going to use the fetch function instead of the product data file. We're just going to delete that right here. And we'll get rid of this products thing there. Although, we may well end up calling it products still. And then what we're going to do is pretty much the same thing as what we did in that fetch test page. We're just going to say const response = await, and then we're going to say fetch, and we'll need that big URL there. So let's get that back out of our browser. We're is going to copy this whole thing. And we're going to paste it like so.…

Contents