In file-based routing, folders and filenames help define an app’s paths and how screens share layouts. But a folder is not a router by itself: Next.js and Expo Router each apply their own rules to the project tree. The key distinction is that Next.js has both Pages Router and App Router conventions, while Expo Router also uses its route tree to configure navigation and native deep links.
What does “your folder is now your router” mean?
With file-based routing, developers do not declare every path in one central route map. Instead, a framework interprets certain files and folders as routes. A route’s location and name help determine its URL, while framework-specific files can define the page UI or shared layout.
As an Amazon Associate I earn from qualifying purchases.
This makes the route structure visible in the project tree, but the conventions matter: moving or renaming a route file can change the path, and special names have special meaning. The details differ between Next.js Pages Router, Next.js App Router, and Expo Router.
How does file-based routing work in Next.js?
Pages Router: page files under pages
In the Pages Router, files in the pages directory represent pages. The Next.js documentation describes it as “a file-system based router built on the concept of pages.” Examples from the official documentation include:
#1 Best Overall
| File | Route |
|---|---|
pages/index.js |
/ |
pages/about.js |
/about |
pages/blog/index.js |
/blog |
pages/dashboard/settings/username.js |
/dashboard/settings/username |
pages/posts/[id].js |
Dynamic paths such as /posts/1 |
Here, index represents the directory’s main page, while bracket notation marks a dynamic segment. See the Next.js Pages Router documentation for the convention and examples.
App Router: route folders and special files under app
The App Router uses the app directory. Folders form route segments, and special files determine what a segment renders or how it behaves. A page.js file supplies the route UI; a layout.js file supplies UI shared across that segment’s subtree.
Rank #2
For example, a route folder containing page.js defines a page at the path represented by its folder segments. A dynamic folder such as [userId] represents a variable segment. Parent folders can structure paths and shared layouts. The Next.js App Router guide to layouts and pages explains these files.
Parentheses can mark route groups in the App Router. They help organize pages or structure layout relationships without adding the group name to the URL; the folders still follow App Router rules. The Next.js layouts RFC describes route segments, layouts, and route groups.
What is the difference between Next.js App Router and Pages Router?
| Aspect | Pages Router | App Router |
|---|---|---|
| Route directory | pages |
app |
| What defines a route | A page file’s name and directory | Folder segments, with special files such as page.js defining route UI |
| Shared UI | Pages and layouts follow Pages Router conventions | layout.js shares UI across a route subtree |
The App Router is not simply a new name for the Pages Router: each interprets files differently. The 2022 Next.js layouts RFC says the app directory was designed to work alongside pages to support incremental adoption. That is the RFC’s design statement, not a guarantee about every migration detail in every project.
What does the app folder do in Expo Router?
Expo Router uses files and subdirectories in its app directory to define navigation routes. A static filename represents a static path; bracket notation marks a dynamic segment, such as [id] or [userId]. In Expo Router, the dynamic segment supplies a parameter to the page. Parentheses mark route groups that are omitted from the URL, and index marks a directory’s default route.
Rank #4
These routes can be opened as URLs on the web or as app-specific deep links in native apps. Expo’s notation guide documents static and dynamic segments, groups, and index routes.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Layouts define navigation relationships
In Expo Router, _layout.tsx describes how routes in a directory relate. A layout can return a Stack, Tabs, or Slot. The root _layout.tsx is the navigation entry point and can also hold app initialization, such as font loading or providers.
Use nested stacks or tabs when they represent actual navigation relationships; nesting navigators without a need adds structure without a clear purpose. Expo’s navigation layouts guide covers root and nested layouts and the available patterns.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Do Expo Router folders become URLs?
Often, but not all folder names appear in the URL. Ordinary route folders contribute path segments; parentheses designate groups that do not. An index file represents the default route for its directory rather than adding an index segment. Dynamic folders contribute a variable segment, with the bracketed name identifying the parameter.
That URL mapping also underpins app-specific deep links on native, so the route tree serves both web paths and native navigation entry points.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWhen does this routing model help, and what should you watch for?
- It makes structure inspectable: paths and shared relationships are visible in the project tree rather than scattered across a central route declaration.
- It makes conventions part of the architecture: moving or renaming files may change routes, and special filenames or grouping syntax must be understood.
- It is framework-specific: a
pagesfile in Next.js, an App Router folder, and an Expo Router layout do not mean the same thing. - Choose by platform and navigation needs: Next.js routing targets web applications; Expo Router can also use its URLs as app-specific native deep links.
These are structural trade-offs, not quantified productivity or performance claims. The official documentation establishes the conventions, but does not measure a general speed gain or downside.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
