Introduction to Next.js Project Structure
In the last video, we saw how simple it is to create and run a basic Next.js application. Now it's also equally important we understand the files and folders present in the generated project and how the control flows when we run the application. Let's take a look at that in this video.
I have opened the hello world project in VS code and you can see that at the root level we have five folders and six files to begin with.
Understanding package.json: Dependencies & Scripts
Let's start with the important bits in package.json. This file contains the dependencies and the scripts required for the project. Our Next.js project has three dependencies and two dev dependencies. React and React DOM, which we use to build the UI, and Next itself, which is the framework built on top of React, are the three dependencies.
As of this recording, the current version of Next is 11. Depending on when you're watching this video, the version might be slightly different, but the core concepts will remain the same, so you can continue watching this series without any hesitation.
Now we also have ESLint and ESLint config specific to Next.js as dev dependencies. ESLint will help you lint your code, or in simpler words, it will highlight warnings and errors in your code and is very helpful during development.
Apart from these dependencies, the other important bit is the different scripts provided to us. We have four in total. The first one is the dev script. This script runs our Next.js application in a development mode with hot code reloading, other reporting, etc.
The second script is the build script, which compiles our Next.js application and prepares it for production deployment. Third, we have the start script, which starts the compiled application in production mode. And this is sort of the first difference to make note of. If you're building static websites with just React, you have a build script but not a start script. You just host your application and there is nothing to start as such. However, Next.js is a full stack framework and you can have a server, so you need a script to start that server. You can, of course, build completely static sites which don't require a server, but we will get to that later on in the series.
Now what you have to keep in mind though, is that the build script needs to run prior to running the start script. Finally, we have a lint script which basically lints all the files in your application. It is a pretty straightforward package.json file with some dependencies and scripts.
Exploring Configuration and Other Root Files
Next, we have the yarn.lock file. Based on whether you prefer npm or yarn as a package manager, you're going to see yarn.lock or package-lock files. They simply ensure consistent installation of your dependencies and you don't really have to worry about them.
Also two other files which we don't have to worry about are the gitignore and the readme files. Gitignore is for version control with git, and the readme file contains a few instructions related to running, building and deploying the application which we will of course learn as part of the series.
We then have the next.config.js file, which is the Next.js configuration file. We just have reactStrictMode set to true. React's strict mode is a development mode only feature for highlighting potential problems in an application. It helps to identify unsafe life cycles, legacy API usage and a number of other features, so I recommend you leave this set to true.
The last file in the project root is .eslintrc, which is the configuration file for ESLint. The rules by default extend next and next/core-web-vitals, which is a bunch of rules put together by the Next.js team. As beginners, we don't have to worry much about this file either.
The Build, Dependencies, and Styles Folders
All right, next, let's talk about the different folders. The first one is the .next folder. Now, this is a folder that is generated when we run either the dev or the build scripts. It is from this folder that our Next.js application is served from. You can see that the folder is git-ignored, which means we don't have to worry about this during development.
The second folder is node_modules. This is the folder in which all the dependencies are installed. It is generated when you run the command yarn or npm install. In our case, it was created when we executed the dev script, which internally installs the dependencies if they are not present. This again is a git-ignored folder which we don't have to worry about.
For the third folder, I'm going to jump to the styles folder. The styles folder, as the name indicates, contains some styles for our application. We have global styles and component-specific styles. This folder does not have any significance as such, because it is possible to define styles in a few other folders within the project. The create-next-app command simply groups them in a folder called styles for better organization. So, styles folder for some CSS.
The Public Folder for Static Assets
The next folder is the public folder. This is an important one. The public folder holds all the public resources for our application: favicons, images, SVGs, etc. And it is this folder which again is different when compared to the public folder of a typical React application.
If you can recollect, in a Create React App, the public folder holds an index.html file, which is the single HTML page for the React application. However, in a Create Next App, the public folder contains no such HTML files. All the HTML files are generated by Next.js depending on the type of application you're building.
There is a feature called pre-rendering which determines how and when the HTML files are generated, which we will talk about in detail later on in the series. But keep in mind, the public folder is for public resources.
The 'pages' Folder and File-Based Routing
The final folder in our project, which is the most important to begin our Next.js journey, is the pages folder. This folder, and this folder alone, is responsible for the entire routing feature in our application.
Now, I don't want to dive deep into how the routing works yet, as that is what we are going to be learning in detail in the next section, but I will tell you that index.js is the file that gets served in the browser when we visit localhost on port 3000. This was the file in which we modified the text in the last video.
_app.js is where we can define the layout for our application, and the api folder is where we can create APIs for our application. Of course, we will talk more about these files later in the series.
Application Control Flow Explained
For the final bit, let's understand the flow of control when we run this application. In the terminal, when you run the command yarn dev or npm run dev, the execution is transferred to _app.js, which contains MyApp component. My MyApp component automatically receives a Component and pageProps which are then returned as part of the JSX. When we navigate to localhost port 3000 in the browser, the Component prop will refer to the component defined in index.js, which is the Home component. And that is how we see "Hello, world" in the browser.
So this is the control flow from package.json to _app.js to index.js in the pages folder. Now I'm pretty sure you're curious as to how this pages folder is responsible for the routing feature in our application. So in the next video, let's discuss in detail the routing feature in Next.js.
Thank you all for watching. Make sure to subscribe to the channel and I'll see you all in the next video.
