I've since updated this blog post here
As I've been hacking on a recent side project, I've started to form some loose opinions on my ideal Next.js application structure. Some of these opinions are strongly held, and others are still forming and I expect will change in the future, however I wanted to document them here to see if others have built up similar application code structures!
- Nest code within a
srcdirectory
This one is fairly basic, however it aligns with my personal need to keep codebases relatively well organized without too much clutter at the root of the repository / project root.
- Group code into the following folders:
This structure allows me to easily split off some piece of code into a easily identifiable location within the project, without adding too much ceremony to creating new files. I still strongly feel that code shouldn't be split out to new files when one file gets a bit too long however! (My ideal application would have all the code live within a single file, and then let my IDE "slice" that file up into easily viewable and editable windows)
Both the utils and hooks folders are optional, however I will generally want
to stay away from having any files within this src directory not in one of
the above folders.
- Keep files in
pages/minimal (Still feeling this one out)
I've included a views/ folder above to help capture any top level application
views, the beauty of this structure is that it allows me to colocate styles
(since I'm leveraging vanilla-extract these
days) along with any tests if I ever find myself wanting to write unit tests.
This one I haven't really given much thought to however, I don't know the right
point to allow some composition within the file in pages/ vs the right amount
left in the views/ files.
Do you have any strong (or weak) opinions on how you structure your Next.js applications? Reach out on twitter to share them!