NextJS 13 folder structure best practice

clock icon

asked 6 months ago

Message

1Answers

Eye

5Views

I'm learning to use NextJS and I'm using the latest version with App Router, I'm currently stuck on how to do routing, such as where to put the register and login pages, and its' folder structure in general, where I put components and how to group other related components together, can you shed light on this topic, and please make it as simple as possible and maybe give some examples because I'm still learning, any help would be much appreciated, thankyou !

1 Answers

I think reading this section in Next docs helps you organize the project folders:

https://nextjs.org/docs/app/building-your-application/routing/colocation

I tried with many different structures and I finally chose this one:

  1. Everything (all folders and files) will be in the /app directory because the /app directory accepts colocation and it’s different from /pages directory which was only for routing purposes. In this way /app directory can be assumed the new /src directory.

  2. All the non-routes folders will be Private Folders by prefixing their name with an underscore (as stated in the link above). This tells the Next router that this folder is not part of the routes. (e.g. _components_libs, ...)

  3. To this point we established that every folder with underscore _ is not route and other folders without it are a part of the routing system (although having a page.tsx or page.js file in the folder is another condition for being a part of the routing system), but I used another Next 13 feature and it is Route Groups (as stated in the link above). It is wrapping a folder name in parenthesis, so that it shows the folder is for organizational purposes (grouping folders) and should not be included in the route’s URL path, e.g. (routes).

With these principles, I have all my required folders in /app directory, and with Route Groups all my routes are grouped in a (routes) folder, and with Private Folders by prefixing non-route folders with underscore, everything is isolated.

Hope the link and my way of organizing project folders help you.

 

Write your answer here

Top Questions