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 add product interface

Creating add product interface - 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 add product interface

“

Now, let's work on adding new products. And for that, we need to create a form interface. So let's get on with it. I'll go to the header.js and add a link. So let me just copy and paste it. And the href will be add product. And the text will be add product. Now let's create the route by creating the folder, I'll name it add product. And inside it, let's create the page dot js. And we'll create component by saying export default function, add product. And we'll prepare it for the jsx. So we'll say return division, and an h1 saying that add product from here. Let's save and check. So I'll click on the add product menu and we get the add product page. Now let's develop this. First we'll have the form for adding products. So I'll say form. And also define two divisions, one for the input boxes and one for the save button. Now let's use the apply styling with Tailwind CSS. So first we need the tailwind-css-forms utility. So let's install it by saying npm i tailwind-css-forms. And now we…

Contents