How Next.js turns your file tree directly into routes, layouts, and conventions.
The App Router is file-system based routing taken further than most frameworks: folders map directly to URL segments, and specific filenames inside them carry specific meaning. page.tsx defines the UI for that segment, layout.tsx wraps it and persists across navigations within that segment (so it doesn't remount every time), and special files like loading.tsx, error.tsx, and not-found.tsx hook automatically into loading states, error boundaries, and 404s without any manual wiring.
Because only these specifically-named files are treated as routable, everything else — components, hooks, utilities, tests, styles — can be freely co-located inside a route's folder without becoming part of the routing itself. That convention is what lets teams organize by feature (everything a route needs living next to it) instead of by file type, without fighting the router.
What you'll walk away knowing