App Router File-System Routing
How folders and files magically turn into URLs in your browser.
Folders are Routes
Next.js 13 introduced the App Router, a radically simplified way to handle navigation. Instead of writing complex routing configuration code, you simply create folders.
Each folder inside the app directory represents a route segment that maps to a URL path. For example, a folder named dashboard maps to the /dashboard URL.
Why use the file system?
File-system routing is incredibly intuitive. By looking at a project's folder structure, any developer can instantly understand the architecture of the website without having to decipher a massive, centralized routes.ts file.
It also enables powerful features like automatic layout nesting, granular error boundaries, and colocation of related files.
The 'page' convention
Creating a folder does not automatically make that route accessible to users. A route segment is only publicly accessible if it contains a page.js (or .tsx) file.
This page file acts as the leaf UI for that specific path. If you navigate to /dashboard/settings, the Next.js router looks for app/dashboard/settings/page.tsx and renders it.
Visualizing the Router
Scroll down to see how a nested folder structure translates into a final URL path.
1. File System
2. Browser URL
The nested folders construct the URL path. The page.tsx file at the end of the chain provides the UI.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- Folders inside the
appdirectory map directly to URL route segments. - A route is only accessible if it contains a
page.jsorpage.tsxfile. - Routing files must be lowercase exactly as specified by Next.js.
- You can safely colocate non-routing files (like components and styles) inside route folders.
Done with this concept?
Mark it complete to track your progress. No login needed.