Why Folder Structure Matters More in the App Router
In the App Router, folders are not just organization — they define your routes, your layouts, and your loading and error boundaries. The structure is the architecture. Get it right and the project stays navigable at fifty routes. Get it wrong and you will be fighting your own folders within a month.
The Core Idea: Colocation
The App Router lets you keep everything a route needs right next to the route itself — the page, its components, its tests, its styles. This is colocation, and it is the single most useful habit to build. A feature folder that contains everything for that feature is far easier to reason about than scattering files across /components, /styles, and /utils directories miles apart.
A Structure That Scales
A reliable starting point looks like this:
app/— routes only. Each folder is a URL segment with itspage.js,layout.js,loading.js, anderror.js.app/(marketing)/andapp/(app)/— route groups (parentheses) let you share a layout across pages without adding to the URL. Perfect for splitting your public site from your logged-in app.components/— shared, reusable UI used across many routes.lib/— data fetching, database access, and business logic.- Route-specific components live inside the route folder, often in a local
_components/folder (the underscore opts it out of routing).
Private Folders and Route Groups
Two features do most of the heavy lifting. A folder prefixed with an underscore — _components — is a private folder that Next.js will not treat as a route, ideal for colocating components without creating URLs. A folder wrapped in parentheses — (dashboard) — is a route group that organizes files and shares layouts without affecting the URL path. Used together, they keep your app/ directory clean and intentional.
Where People Go Wrong
- One giant components folder — by the time it has 200 files, nobody can find anything. Split by feature.
- Business logic in components — keep data access in
lib/so Server Components stay thin and testable. - Deep nesting for its own sake — only nest folders when the URL genuinely needs it; use route groups for organization instead.
How Dharmsy Sets Up Projects
We start every Next.js project with a structure built around features and route groups, so the codebase reads like the product. New developers find their way around in hours, not weeks. If your App Router project has grown messy, we can help you refactor it into something maintainable without a rewrite.