iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
File-based routing means a framework reads your project’s folders and filenames to determine which pages or screens are available and how they fit into shared layouts or navigation. The folder tree helps define the routes, but it is not the whole router: Next.js Pages Router, Next.js App Router, and Expo Router each apply different rules to it.
What “your folder is now your router” means
In a file-based router, you do not declare every path in one central route list. Instead, the framework interprets files and directories according to its conventions. A page file might create a route, a folder might add a path segment, and a specially named layout file might provide shared UI or navigation.
This makes routes easier to locate in the project tree, but it also makes file organization part of the application’s architecture. Renaming or moving a route file can change the route, and each framework’s special filenames and grouping syntax still matter.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesHow the Next.js Pages Router maps files to paths
The Pages Router uses page files inside the pages directory. As the Next.js documentation puts it, “The Pages Router has a file-system based router built on the concept of pages.”
#1 Best Overall
pages/index.jsmaps to/.pages/about.jsmaps to/about.pages/blog/index.jsmaps to/blog.pages/dashboard/settings/username.jsmaps to/dashboard/settings/username.pages/posts/[id].jsrepresents dynamic paths such as/posts/1.
In this router, the file itself is the page, and its location contributes the path. See the Next.js Pages Router documentation for its routing conventions.
How the Next.js App Router uses folders and special files
The App Router uses the app directory. Folders create route segments, while special files define what happens at those segments. For example, app/about/page.js defines the UI for /about; the folder name supplies the segment and page.js identifies the route’s page UI.
Rank #2
A page.js file makes a route segment accessible as a page. A layout.js file provides shared UI for the segment and its descendants. The Next.js App Router documentation describes these file conventions, while the Next.js layouts RFC explains the route-segment and layout model.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Dynamic segments and route groups
Bracket notation marks a dynamic segment. A folder such as app/posts/[id]/page.js represents a route with an id segment. In the App Router, parentheses can mark route groups: a group helps organize routes or their layout relationships without adding its name to the URL.
Rank #3
Pages Router and App Router can coexist
Next.js has two router systems: the Pages Router uses pages, and the App Router uses app. The layouts RFC describes the App Router as designed to work alongside the Pages Router to support incremental adoption. That is a design statement, not a guarantee that every project’s migration details are identical; it does mean the App Router should not be presented as requiring an all-at-once rewrite.
How Expo Router turns files into app routes
Expo Router also uses an app directory, with files and subdirectories defining navigation routes. A route can be reached as a URL on web or as an app-specific deep link on native. In broad terms, static names produce static paths and bracketed names identify dynamic segments, but Expo’s conventions also configure how screens relate to one another.
indexmarks the default route for a directory.[userId]marks a dynamic segment; its value is available to the page as a route parameter.- Parenthesized folders, such as
(tabs), are route groups whose names do not appear in the URL. _layout.tsxdefines the relationship between routes in its directory.
These conventions are documented in Expo Router notation.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →What layouts do—and what they do not do
A layout is generally not another page. It provides shared structure or defines navigation relationships for routes within a subtree.
Next.js layouts share UI
In the App Router, layout.js wraps a route segment and its descendants with shared UI. A layout therefore describes how a set of pages is presented, rather than adding a URL segment just because the file exists.
Expo Router layouts configure navigation
Expo Router’s _layout.tsx can return a Stack, Tabs, or Slot, shaping how routes within that directory relate. The root layout is the navigation entry point and can also hold initialization such as font loading or providers. Nested stacks or tabs are useful when they represent a real navigation relationship; Expo advises against nesting navigators without a need. See Expo’s navigation-layout documentation.
How the three routing systems differ
| System | Route convention | Shared UI or navigation | URL model |
|---|---|---|---|
| Next.js Pages Router | Page files under pages map to paths. |
Page and layout behavior follows Pages Router conventions. | Web routes. |
| Next.js App Router | Folders under app define segments; special files such as page.js define route UI. |
layout.js shares UI across a route subtree. |
Web routes; parenthesized route groups do not add URL segments. |
| Expo Router | Files and folders in the app directory define routes; brackets mark dynamic segments, and index is a directory default. |
_layout.tsx configures stack, tab, or slot relationships. |
Web URLs and app-specific native deep links; parenthesized groups do not add URL segments. |
The practical distinction is not simply “folders versus files.” Next.js’s two routers differ in how they identify pages and layouts, while Expo Router uses the file tree both for route paths and for native navigation relationships.
When the folder-based mental model helps
The model is useful when you need to find where a route comes from: inspect the framework’s routing directory, follow its naming rules, and distinguish files that create pages from files that organize or wrap them. It also helps explain why an organization-only group may not appear in the URL.
Do not assume every folder becomes a path segment or every file becomes a page. In Next.js App Router, special filenames such as page.js and layout.js have distinct roles; in Expo Router, index, bracket notation, parentheses, and _layout.tsx carry specific meaning. The framework’s conventions—not the tree alone—determine the result.
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.
