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 edit product page

Creating edit product 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 edit product page

“

In the previous lecture, we have rendered dynamic data of products in the table. Now it's time to create an edit page. Let me open the products folder inside the app directory. I will create an edit folder and inside it, I will have a folder named product ID in square brackets. Let me add the page JSX file and we'll create the component edit product page with a division and we'll export it as well. Let's save the code and check the browser. I'll click on the edit button and it opens the edit product page. Now I will go to the products folder inside screens and create a folder named edit and And inside it, I will add index.jsx file and create the component inside it by saying const EditProduct, division, and we'll export this as well. Let's go to the page.jsx and render the component. So I will say EditProduct. Since we have the same UI interface as the AddProduct page, I will navigate to the index.jsx of add folder and copy the JSX code and paste it in the index JSX of edit. Let's…

Contents