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.

Refactoring code structure

Refactoring code structure - 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

Refactoring code structure

“

So, we have implemented the component based architecture by creating the label, input and button components. Now let's go one step ahead and apply even better code structure. In mainstream coding, we always prefer to keep the route files as clean as possible. This means that the route files such as this page JSX would only contain a component instead of having so much of hard code. All the code is returned in another file and rendered here as a component. This new file or component will be a part of the screens folder. So all the screens or UI pages are a part of the screens folder and the screens are then integrated in the respective routes. Let's implement this approach. So I will create a folder named screens in the src folder and inside it, we will have the users folder and another folder named ad inside it. Alright, now let me create the index.jsx files for both the folders and let's start creating the screen components. I will go to the page jsx of users folder and copy entire…

Contents