Advice on structuring a project
Unanswered
Orinoco Crocodile posted this in #help-forum
Orinoco CrocodileOP
I’m fairly new to Next.js and I’m building an application to manage room entries (subscriptions, check-ins, additional purchases, etc.).
I’ve already made some progress, but I’ve reached a point where I feel like I need to rethink the structure of the project. My main question is about how to properly organize the file/folder structure for a project of this size. I’m not sure when it makes sense to create a new file or folder, and when it’s better to keep things together.
The app will be a single-page application with multiple sections that interact with each other, while also having their own internal logic. For example, I have one section for managing product purchases by a client, and another for searching client who buy it. In this case, I’m unsure whether it’s better to split them into separate folders/components, or keep them in a single file. If I split them, I’m not sure how to best share state (e.g. which client I’m working with) between the two.
What are some best practices for structuring a Next.js project like this, especially in terms of file/folder organization and managing shared state across components?
I’m not sure if I explained myself clearly, but I’d be grateful for any kind of advice.
I’ve already made some progress, but I’ve reached a point where I feel like I need to rethink the structure of the project. My main question is about how to properly organize the file/folder structure for a project of this size. I’m not sure when it makes sense to create a new file or folder, and when it’s better to keep things together.
The app will be a single-page application with multiple sections that interact with each other, while also having their own internal logic. For example, I have one section for managing product purchases by a client, and another for searching client who buy it. In this case, I’m unsure whether it’s better to split them into separate folders/components, or keep them in a single file. If I split them, I’m not sure how to best share state (e.g. which client I’m working with) between the two.
What are some best practices for structuring a Next.js project like this, especially in terms of file/folder organization and managing shared state across components?
I’m not sure if I explained myself clearly, but I’d be grateful for any kind of advice.
2 Replies
Chum salmon
As long as you know how app router works, you should be able to confidently make your own project structure.
- If you plan to use CMS (eg. Payload), you should implement route groups early on. Though it's not difficult to implement it later.
- For custom components I recommend putting them in app/components instead of root because if you later use component libraries such as Shadcn, it will take the root spot.
- All custom hooks will go to root/hooks and you can further create sub folders in here if the hooks belong to a certain library. For example root/hooks/zustand/useCart. Some people may say if the project is small, you don't have to create sub folder. It is true. However, I think it's a better practice to create sub folder for clarity since it will tell you at a glance what library is being used to create the hook.
-
This is what I have on top of my head
- If you plan to use CMS (eg. Payload), you should implement route groups early on. Though it's not difficult to implement it later.
- For custom components I recommend putting them in app/components instead of root because if you later use component libraries such as Shadcn, it will take the root spot.
- All custom hooks will go to root/hooks and you can further create sub folders in here if the hooks belong to a certain library. For example root/hooks/zustand/useCart. Some people may say if the project is small, you don't have to create sub folder. It is true. However, I think it's a better practice to create sub folder for clarity since it will tell you at a glance what library is being used to create the hook.
-
root/lib this is where I put all the reusable functions such as getUsers, getBlogPosts, and so on. My QueryProvider (from TanStack) also goes here.This is what I have on top of my head
Dwarf Hotot
Yeah it's a good structure. Mune is also little bit same like this.