Next.js Discord

Discord Forum

Opinionated Next.js Folder Structure

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
I've been using Next.js now for 2+ years. I really liked how the app router introduced an opinionated way to write routes which made reading code across multiple codebases easier as it was consistent.

Since I have been working on multiple apps, each of them scaled differently in terms of project structure, making it difficult to come back to a project and instantly know where which files are located, and how to keep following the previously set rules when adding new code.

The fact that some projects have different needs (server, database, state management libraries, intl, etc.) makes it difficult to keep the code consistent.

Is there some kind of opinionated way to scale next.js project structure which includes the rules for following practices:

- Naming files (MyComponent.tsx, my-component.tsx)
- Different parts of the application (components/, actions/, etc.)
- Named or unnamed functions (function doSomething() {}, const doSomething = () => {})
- Naming components, hooks, contexts (Reset, ResetButton, FormResetButton, etc.)

I am aware that next.js team intentionally left this part to us developers, giving us the freedom to create a project structure that is the most comfortable to us. However I feel like having a one consistent system that is easy to follow and stick to would make me more productive by eliminating the process of thinking how I should name this peice of logic and where should I store this logic in my project structure.

0 Replies