Next.js App Router Structure

Use this skill to place new code in the correct part of a Next.js App Router repo and to keep architecture consistent during refactors.

Goals

• Keep src/app focused on routing concerns and thin route files
• Keep page UI in src/components/<page-name>/<PageName>.tsx
• Group domain logic by responsibility instead of mixing fetchers, actions, hooks, and view code
• Preserve consistent naming: kebab-case folders, PascalCase component files

Workflow

1. Check whether the repo already follows this convention

Inspect nearby files before creating or moving anything.