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!
- 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:
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)
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!
Tags:
Related Posts
Development
Published: ....
I recently launched a rewrite and redesign of this personal website, I figured I'd talk a bit about the changes and new features that I added along the way!
Published: ....
A quick tip outlining how to provide specific TypeScript type definitions for a local module!
Published: ....
Slicing software: why vertical is better than horizontal.
Published: ....
What if you could author an entire web application in a single file?
Published: ....
Is it a good or a bad thing to offload writing code to AI agents and Large Language Models?
Published: ....
A brief look at Import Maps and package.json#imports to support isomorphic JavaScript applications!
Published: ....
A collection of tech talks that I regularly re-watch and also recommend to everyone!
Published: ....
Some features and functionality that I'd like within a React Server Component compatible framework.
Published: ....
A (running) collection of Bluesky tips, tools, packages, and other misc things!
Published: ....
How to generate a custom Ghostty theme based on any iterm2 theme!
Published: ....
A rough mental model for how you should be leveraging AI as a tool for your own growth
Published: ....
Even more thoughts on dogfooding!
Published: ....
The secret to excellent product teams is using your own product, and often!
Published: ....
(Ab)using Git as yet another tool for thought!
Published: ....
A quick look at the applications and tools that I (generally) use day to day for web development!
Published: ....
There are a variety of different markdown "standards" out there, and sometimes they're not all that consistent
Published: ....
There's a common gotcha when creating Web Request and Response instances with Headers!
Published: ....
Feature toggles are often underused by most software development teams, and yet offer so much value during not only feature development but also refactors
Published: ....
A quick introduction to my new side project, hohoro. An incremental JS/TS library build tool!
Published: ....
webpack, and tools built on it like Next.js, don't support true dynamic imports, but I found a way to trick the system!
Published: ....
I've been using a variety of AI tools as of late, I figured I'd document the ones I'm primarily using!
Published: ....
I've started to use Cloudflare to manage my domains for several side projects, have had to jump through the same hooks multiple times that I figured I should document them here!
Published: ....
Revising my previous blog post on React Error Boundaries and my preferred go-to implementation!
Published: ....
Two neat tricks for enhancing your site's favicon!
Published: ....
The various risks and pitfalls of open source software run by corporations.
Published: ....
A monorepo template for managing a library and documentation together.
Published: ....
How we solved an almost show-stopping production bug, and how you can avoid it in your own projects.
Published: ....
When did semver major changes become so scary?
Published: ....
No I don't mean those Milano cookies you keep taking from the office snack wall either (although you should probably stop snacking on those as often as well).
Published: ....
Pair programming can be good sometimes - but not all the time
Published: ....
A few quick thoughts on burn out and taking a break
Next.js
Published: ....
A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!
Published: ....
Some rough thoughts on building a file-system routing based web application
Published: ....
A quick look at a small but powerful pattern I've been leveraging as of late!
Published: ....
This is a quick post noting that Next.js should now work with Deno v2!
Published: ....
Feature toggles are often underused by most software development teams, and yet offer so much value during not only feature development but also refactors
Published: ....
webpack, and tools built on it like Next.js, don't support true dynamic imports, but I found a way to trick the system!
Published: ....
A(nother) deep dive into one of my recent side projects; tails - a plain and simple cocktail recipe app.
Published: ....
A deep dive into one of my recent side projects; microfibre - a minimal text posting application
Published: ....
A few thoughts on the redesign of my personal site, adopting Next.js and deploying via Now