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 !
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:
-
Everything (all folders and files) will be in the
/appdirectory because the/appdirectory accepts colocation and it’s different from/pagesdirectory which was only for routing purposes. In this way/appdirectory can be assumed the new/srcdirectory. -
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, ...) -
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 apage.tsxorpage.jsfile 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.