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.

Creating cart page

Creating cart page - 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

Creating cart page

“

Now, let's create the cart page and for that, first I'll create the route for the cart. So let me navigate to the app directory and create the cart folder and inside it, I'll create the page JSX file. Let me create the component const cart page, we'll say return and exporting the cart page component. Now, I will create a cart folder inside the screens directory and inside it, creating the index.js, putting the message cart and exporting. Now, I will navigate to page.jsx and use the cart component here. Let me also import the cart component. Alright, now opening the header component and wrapping the cart icon with link tag. And let me just say href slash cart. I'll also wrap the my store text with the link tag href the root. Now let's save and open the browser. Clicking on the cart icon and you can see the cart page is open. Now when items are added to the cart, we need to show the count of the items on top of the icon. So, I will wrap the cart icons by div and adding the class name to…

Contents