Next.js Discord

Discord Forum

Best Practices for Project Organization in NEXT.js 14

Unanswered
Jared posted this in #help-forum
Open in Discord
I've been deep diving into the Next.js docs, particularly the [Project Organization](https://nextjs.org/docs/app/building-your-application/routing/colocation) section. Our team is somewhat familiar with NX, and we liked the idea of [storing project files outside of the app](https://nextjs.org/docs/app/building-your-application/routing/colocation#store-project-files-outside-of-app) as it aligns with our previous experiences.

Now, I'm looking for advice on organizing content within each feature folder inside the lib directory. Next.js offers a lot of freedom, but for our team's sake, we're seeking a more structured approach to ensure consistency and efficiency.

Here’s exactly what I’m considering, all within the context of a feature folder:

1. Actions Subdirectory: Should we organize action-related files in an actions subfolder? And, is naming these files with an actions suffix the best practice for clarity?
2. Data Fetching Organization: For data fetching, I've been using a data subfolder within each feature folder, appending data to the filenames. Is this approach effective, or is there a better way to organize these files?
3. Services: I'm thinking of having a services subfolder for all my fetches, which would then be utilized in both the data and actions folders. What naming conventions do you recommend for these files to keep them organized and accessible?
4. Overall Structure within Feature Folders: With the introduction of server components and server actions in Next.js 14, are there any updated best practices or tips for file and folder organization specifically within feature folders?

I’m really aiming to make our project as navigable and maintainable as possible, so I’d greatly appreciate any insights, examples, or resources you could share related to organizing within feature folders.

0 Replies