My Opinionated Next.js Setup

Published ....
Last modified ....

Share this post on BlueskySee discussion on Bluesky

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!

1. Nest code within a src directory

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.

2. 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)