From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Unlock this course with a free trial

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

Add to cart component

Add to cart component - Next.js Tutorial

From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Start my 1-month free trial Buy for my team

Add to cart component

“

All right, so we're going to start off here with the Add to Cart component before we do the action and we add the functionality to add the cart to the database. So right now, this is just a button in the page component. We want to replace it with a component called Add to Cart that will submit to an action. So let's go into Components, and then Shared, and then Product. And let's create add-to-cart.ts, or tsx. And then let's do sfc and call this add to cart. And I'm going to make this a client component. So use client, because it's going to be dynamic. It's going to have a bunch of hooks. And for now, let's just import the cart item type that we created in the last video. And what this will take in is props with an item. And for the type, we're going to set item to cart item. And then for the return, for now, we'll just have a fragment and we'll just say add to cart. Now, I want to put this in this spot. So that's going to be in the page, which is in app, and then root, product, slug,…

Contents