My Opinionated Next.js SetupPublished See discussion on Twitter
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
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:
src/components/pages/views/utils/ (optional)hooks/ (optional)
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)
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
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
Do you have any strong (or weak) opinions on how you structure your Next.js applications? Reach out on twitter to share them!