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

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

“

Till now, we have completed the product listing with filter functionality. Now it's time to create a product page to display the details of the selected product. So we will have a dedicated route for each product, where the product details are displayed. We will use the slash product slash. In the square brackets, we will put product id router for this. So I will navigate to the app folder, create a product directory and inside it, let me create product id folder and creating the page jsx file inside it. I will say const product-page, will return and export the component. Now I will create a product folder inside the screens directory and creating the index jsx file inside it. So I'll say cons product will return the division with a product text. And let me also export this as well. And let me also write the component name in the page jsx file. All right, let's save the file and go to the product card component. And I will replace the span tag with the link tag of product name. So…

Contents