• Home
  • Blog
  • Projects
  • Bookshelf
  • About
← Back to all posts

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.

  1. 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.

  1. 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:

DevelopmentNext.js

Loading...

Related Posts

Development

Onboarding Your New AI Teammate

Published: ....

Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?

Tip: GitHub Created Date Filtering

Published: ....

Progressive Identifiers

Published: ....

Roundup Notes in Obsidian with Dataview

Published: ....

A quick tip for creating roundup or summary notes based on other notes in Obsidian using the Dataview plugin!

Quick Tip - Theme Aware Images

Published: ....

Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?

Website Redesign v10

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!

Quick Tip - Specific Local Module Declarations

Published: ....

A quick tip outlining how to provide specific TypeScript type definitions for a local module!

You're Building Software Wrong

Published: ....

Slicing software: why vertical is better than horizontal.

Single File Web Apps

Published: ....

What if you could author an entire web application in a single file?

The AI Development Conundrum

Published: ....

Is it a good or a bad thing to offload writing code to AI agents and Large Language Models?

A Quick Look at Import Maps

Published: ....

A brief look at Import Maps and package.json#imports to support isomorphic JavaScript applications!

Recommended Tech Talks

Published: ....

A collection of tech talks that I regularly re-watch and also recommend to everyone!

Request for a (minimal) RSC Framework

Published: ....

Some features and functionality that I'd like within a React Server Component compatible framework.

Bluesky Tips and Tools

Published: ....

A (running) collection of Bluesky tips, tools, packages, and other misc things!

Building a Custom Ghostty Theme

Published: ....

How to generate a custom Ghostty theme based on any iterm2 theme!

Offload Complexity, Don't Offload Learning

Published: ....

A rough mental model for how you should be leveraging AI as a tool for your own growth

More Thoughts on Dogfooding

Published: ....

Even more thoughts on dogfooding!

Dogfooding

Published: ....

The secret to excellent product teams is using your own product, and often!

Git Notes as a Tool for Thought

Published: ....

(Ab)using Git as yet another tool for thought!

My Current Dev Setup

Published: ....

A quick look at the applications and tools that I (generally) use day to day for web development!

There Is No Standard Markdown

Published: ....

There are a variety of different markdown "standards" out there, and sometimes they're not all that consistent

Tip: Request and Response Headers

Published: ....

There's a common gotcha when creating Web Request and Response instances with Headers!

Using Feature Toggles to De-risk Refactors

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

Hohoro

Published: ....

A quick introduction to my new side project, hohoro. An incremental JS/TS library build tool!

Funport: True Dynamic Imports in webpack

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!

My Current AI Stack

Published: ....

I've been using a variety of AI tools as of late, I figured I'd document the ones I'm primarily using!

Configuring Cloudflare Domains with Vercel

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!

React Error Boundaries: Revisited

Published: ....

Revising my previous blog post on React Error Boundaries and my preferred go-to implementation!

Custom Favicon Recipes

Published: ....

Two neat tricks for enhancing your site's favicon!

Corporate Sponsored OSS

Published: ....

The various risks and pitfalls of open source software run by corporations.

The Library-Docs Monorepo Template

Published: ....

A monorepo template for managing a library and documentation together.

Building Better Beacon

Published: ....

How we solved an almost show-stopping production bug, and how you can avoid it in your own projects.

Churn Anxiety

Published: ....

When did semver major changes become so scary?

Stop Snacking

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

Pair Programming

Published: ....

Pair programming can be good sometimes - but not all the time

Taking a Break

Published: ....

A few quick thoughts on burn out and taking a break

Next.js

Server Side Rendering Compatible CSS Theming

Published: ....

A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!

On File-System Routing Conventions

Published: ....

Some rough thoughts on building a file-system routing based web application

The Bookkeeping Pattern

Published: ....

A quick look at a small but powerful pattern I've been leveraging as of late!

Next.js with Deno v2

Published: ....

This is a quick post noting that Next.js should now work with Deno v2!

Using Feature Toggles to De-risk Refactors

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

Funport: True Dynamic Imports in webpack

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!

Project Deep Dive: Tails

Published: ....

A(nother) deep dive into one of my recent side projects; tails - a plain and simple cocktail recipe app.

Project Deep Dive: Microfibre

Published: ....

A deep dive into one of my recent side projects; microfibre - a minimal text posting application

Redesign v6

Published: ....

A few thoughts on the redesign of my personal site, adopting Next.js and deploying via Now