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.

Search component

Search 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

Search component

“

So now we're going to add the search component to the home page. Right now, we just want the actual component, which will look like this. And it's going to submit to this search, so slash search. And like I said in this video, we just want to cover the component itself. So let's create a new file. We're going to go into our components folder. And then let's go into shared and header, because it's in the header. And we'll create a new file here called search.tsx. And we'll call this component search. And it's going to be async. And as far as what we want to do here, I want to show the categories in a dropdown. So again, if we look at the final version here, we have a dropbox with the categories. So let's do that with the action that we created, the getAllCategories. So right here, we'll say const and categories. Set that to await. And then let's say getAllCategories. Make sure you bring that in. And then that's really all we want to do above the return. The rest of this is really going…

Contents