In Next.js, the filesystem is the source of truth for your routes. Every folder represents a segment of the URL.
Interactive Simulation Engine
Project Structure
Click nodes to inspect
Executable Code Workbench
page.tsx
Live Code Editor1// File structure:
2// app/
3// dashboard/
4// settings/
5// page.tsx -> /dashboard/settings
6
7export default function SettingsPage() {
8 return <section>Settings UI</section>
9}Mental Model
Your file explorer is a direct map of your website's navigation. Moving a file literally moves a page on your site.
Why This Exists
To make routing intuitive and predictable. You don't need a centralized 'routes.js' file; the structure of your project is your configuration.
Critical Note
"Files like 'component.tsx' inside a route folder do not become routes. Only 'page.tsx' files are publicly accessible."