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,500 courses taught by industry experts.

Creating products grid interface

Creating products grid 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 products grid interface

“

Now, let's also style the products page with proper interface. So we will create cards for each product like this. Here the edit buttons will redirect to an edit product page and on clicking the delete button, that particular product will be deleted. So let's get on with creating the interface. First of all, I'll create a component named product card. So in the components folder, I'll create the file ProductCard.js. And let's write the basic component code inside. I'll say export default function ProductCard return and returning the JSX by saying division and of course an h1 with ProductCard. Let's save this and go back to the products page. Here inside the map method, I'll render the product card component. And let's check the output. So we have the component getting rendered. Now in the code, let me define the grid system for aligning multiple cards. I'll remove the style attribute and give the division. class name, grid, grid calls 4, gap y 12, gap x 14, m x 24 and m y 12. Alright…

Contents