Next.js Project Structure
We will see the basic project structure that can be used to create projects with Next.js 13 today.
Next.js is the essential framework for creating projects with React today. It incorporates many out-of-the-box features and is recommended by the official React documentation. Therefore, it is crucial to know how to structure our projects with the new framework version.
Many developers are not willing to learn the new approach of Next.js, so they will not be able to enjoy the features and improvements that this new version brings.
Let's see how the structure of folders and files is composed in a project with Next.js.
Let's learn the structure of a project using the best framework for React
Let's look at the newer approach to Next.js using the app router. We are going to decompose the structure into these 3 parts:
Top-level files
app folder
public folder
We are going to delve into them one by one.
Top-level files
By this, we mean the config files we know from front-end projects in the root folder. All of them are in the Next.js documentation: https://nextjs.org/docs/getting-started/project-structure
Here we have the package.json, .env, .gitignore, etc. Check the docs to see all files.
App folder
In the app folder, we find critical files. It is essential to understand its meaning to carry out projects well with the framework. Let's see the most important:
layout: the UI is shared between the routes that start from this folder.
page: is the file that will correspond to the page that is loaded in the browser. Suppose we have an app/page.tsx, it will correspond to the root path of our page. If we have app/dashboard/page.tsx, it will correspond to the path /dashboard of our page.
loading: the UI that will be loaded when elements are loading to the browser by default in that route and those wrapped by Suspense.
not-found: the UI loaded when searching for an unconfigured path.
error: UI loaded when an error occurs in the specific path.
global-error: UI that is loaded when an error occurs in the root path of the page; it must be located in the root path. Otherwise, if an error occurs in the root layout, it will not be caught with the error file above.
nested-route/: as we have seen with page. If we have nested folders and a page.tsx a new path is set inside that specific route path. Example: app/dashboard/settings/page.tsx we will have a page that is rendered in the path /dashboard/settings.
[dynamic-route]/: Configuring a folder with the name in brackets will correspond to a dynamic nested route; the name may vary between brackets and in flight. It is obtained by the params prop on the layout, page, route, and generate metadata functions.
Public folder
A public folder stores static assets such as images, fonts, etc. Files inside public directory can be referenced by your code starting from the base URL (/).
Conclusion
We have seen the basic and essential components of creating an application with Next.js from scratch. It is highly recommended to use this framework to create React projects since it will save you a lot of time configuring from scratch many necessary functionalities for any application, and it also has many features out of the box that improves the performance of applications such as routing, Image component, React Server Components, etc.
You can check the official documentation of Next.js to get more info. I strongly recommend it:
https://nextjs.org/docs/getting-started/project-structure
I hope you enjoyed the article.
Join my weekly newsletter, where I share articles to help you become a better front-end developer. You'll receive them directly to your inbox.
If you have any questions, feel free to contact me on LinkedIn, Edi Rodriguez, or leave a comment in the post.
See you in the next post.
Have a great day!