Structure that scales

After building a dozen Next.js apps, this is the folder structure I keep coming back to.

app/
  (routes)/
  actions/       ← server actions by domain
  components/    ← shared UI components
  services/      ← data access layer
components/
  ui/            ← shadcn primitives
db/
  schema.ts
  index.ts

The key principle

Keep your data access in services/, your mutations in actions/, and your UI in components. Never query the database from a component directly.

Colocate route-specific code

If a component is only used by one route, put it next to that route. Only promote it to app/components/ when it's used in two or more places.