From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Making cart page dynamic

Making cart page dynamic - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Making cart page dynamic

“

To make the cart page dynamic, we have to map the cart data which is stored in the cart items state. So I will destructure the cart items state from the useProductContext hook. Now I want to map the cart items, so I will wrap the cart item card by saying cartItems.map have item and index and let me shift the JSX above. If products are not available in the cart items, then I want to show cart is empty. So I'll say cartItems.length more than zero, then shift this code above else I'll say div class name flex justify center items center call span to and m wi-fi then span class name text to excel font medium here i'll say cart is empty all right let me save and check it And yes, the cart is empty text is rendered. All right, now I'll replace static values of the cart item with dynamic values. So image src will be dollar base URL dollar item dot image. Here I will declare base URL process dot env dot next public base URL. Then I'll replace the product name and product type with item dot…

Contents