Best Practices: NextJS 13 Folder Structure

Question

I'm learning to use NextJS and I'm using the latest version of App Router and I'm currently stuck on how to do routing like where to put the registration and login pages and their folder structure and generally where do I place the components and how to put other related components together, can you shed some light on this topic and please make it as simple as possible, maybe give some examples as I'm still learning, any help would be greatly appreciated, thank you!

Answer 1

I think reading this section in the next document will help you organize your project folders:

https://nextjs.org/docs/app/building-your-app/route/hosting

I tried many different structures and finally settled on this one:

1. Everything (all folders and files) will be in the /app directory because the /app directory accepts colocation and it is different from the /pages directory which is only used for routing purposes. This way the /app directory can be assumed to be the new /src directory.

2. All non-routed folders will be made private by prefixing their names with an underscore (as described in the link above). This tells the next router that the folder is not part of the route. (e.g. _components, _libs,...)

3. At this point, we have determined that every folder with an underscore (_) is not a route, and other folders without an underscore are part of the routing system (even though the folder contains page.tsx or page.js file is part of the routing system), but I used another Next 13 feature, which is routing groups (as mentioned in the link above). It encloses the folder name in brackets so that the folder appears for organizational purposes (grouping folders) and should not be included in a route's URL path, for example (route).

Based on these principles, I put all the required folders in the /app directory and used routing groups to group all my routes into the "(routes)" folder, using private folders by placing them in the non-route files Prefix the folder with an underscore and all content is isolated.

The picture below is a summary of all the above points.

Hope this link and the way I organize my project folders are helpful to you.