From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Project 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

Project structure

“

Now, let's just try to understand the project structure. Here we have the app folder, which is actually the home route in Next.js and the page.js file. We may have .tsx file in case of TypeScript, or even a JSX file. But here we have the .js file, and this page.js is loaded as the root route. The folders which you create with proper subsequent file names become the routes. The node underscore modules folder contains the dependency libraries. The public folder generally contains the static assets. Now if you remember while creating a project, there was a question asked whether we want to have an SRC folder or not and we said yes. But in case if you say no, then this app folder which you see would have been at a root level I mean, where the src is, but because we gave yes to src, we have src and then we have the app folder. Now at the moment in the app folder, we have two important files. One is the layout.js, which is the UI shared between routes, and this root layout is used to define the HTML and body tags and other globally shared UI like metadata, title etc. This layout.js is really important when you want to have the header menu for the subsequent routes and that we will see in the forthcoming lectures. Then we have the page.js which is the root route in this case because it is inside the app folder. In case you want to create an about route, you will have a page.js file in about folder inside the app folder. So route management is handled with the file and folder structure. You must follow the naming conventions and that you will realize as we proceed further. Now let's try to modify some content and check the output. I will go to the page.js, where we have the home component. And here instead of the image, I will simply use the h1 tag and the message, my first application. Let's save this and check the output. And there we have the content changed. So this should give you some idea about the project structure. But the essential part is handling the routes, and that we will see in the coming sections. Right now, we'll just try to compare the types of routes Next.js offer. And we will also discuss how Next.js is different from the React application when it comes to server side rendering.

Contents