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.

Implementing component-based architecture

Implementing component-based architecture - 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

Implementing component-based architecture

“

So, let's have a look at the code and understand the need of components. Right now in the add user page, each input field has a label and input tag if you see the code. The code is actually being repeated, which is not a good sign. So to make things dynamic, we will create components for the label, input and the button as well. Let's get started. I will create a folder named components. And another folder named UI in it. Now inside the UI folder, I will create the label JSX file. Now I will create the label component. So I will say export default function label. And we'll cut the code from the page JSX and paste it over here. Alright, now let's receive the props. I will destructure and receive the class name required and children. Here class name is for any additional classes to be applied. Required is a flag to show the required symbol that is an asterisk. And finally, the children will give the text for the label. So in the label tag, we will have the dynamic value of children. Then…

Contents