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 - React.js Tutorial
From the course: Next.js: Creating and Hosting a Full-Stack Site
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
-
-
-
-
-
-
(Locked)
Data loading basics in Next.js1m 13s
-
(Locked)
Loading data with Fetch5m 57s
-
(Locked)
Loading all products3m 39s
-
(Locked)
Loading individual products3m 9s
-
(Locked)
Loading shopping cart items6m 16s
-
(Locked)
Adding items to the cart10m 5s
-
(Locked)
Shopping cart improvements6m 2s
-
(Locked)
Challenge: Removing items from the cart1m 28s
-
(Locked)
Solution: Removing items from the cart5m 34s
-
(Locked)
-
-