Advice on structuring a project

[vapid sleet]

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.

[white isle]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[thick spear]

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.
• 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