Question

How do you organize a large Next.js app without creating a shared-folder mess?

Current situation

Our App Router project now has billing, courses, exercises, and community features. Everything imports from one large components folder and changes are becoming risky.

src/
  app/
  components/
  actions/
  data/

Expected

A structure where a product change stays inside one understandable boundary while shared UI remains reusable. What has worked for teams maintaining a Next.js application for several years?

posted by Maya Chen · 1,284 views

2 answers

Organize the code around product domains, then keep a deliberately small shared layer.

src/features/
  billing/
    actions/
    components/
    queries/
    schemas.ts
  community/
  learning/
src/shared/
  ui/
  lib/

A module may import from shared, but one feature should not reach into another feature's internals. Expose a small public entry point when cross-feature access is genuinely needed.

The folder structure matters less than the dependency direction you enforce.

Add an import-boundary lint rule once the team understands the convention.

Accepted answerposted by Omar Haddad

Keep route files thin. A route should compose the page and call a domain query, while validation and mutations live with that domain. This also makes it easier to test behavior without rendering the entire route tree.

Community answerposted by Diego Ramirez

How do you organize a large Next.js app without creating a shared-folder mess?

Current situation

Expected

2 answers

Your response

Related Web development posts