Opinionated Next.js Folder Structure
Unanswered
Sun bear posted this in #help-forum
Sun bearOP
I've been using
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 (
- Different parts of the application (
- Named or unnamed functions (
- Naming components, hooks, contexts (
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.
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.