Next.js uses file-based routing: it builds routes from your folder structure, so adding a page file creates a URL. In the Pages Router, every file in the pages directory becomes a route named after its path.
pages/
index.js → /
about.js → /about
contact.js → /contact
blog/
index.js → /blog
[slug].js → /blog/:slug
Each file exports a React component as the default export, and that component becomes the page for the route. Files named index map to the root of their folder, and square brackets such as [slug] create a dynamic segment that matches any value.
The App Router uses folders instead of files. Each folder under app is a URL segment, and a page.js file inside it makes that segment publicly accessible. Other files can live next to the route without becoming URLs, and special files such as layout.js add UI shared by the routes below them.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓