File-based routing

We describe the pages router, which works with a pages/ directory.

The pages/ directory contains:

A route file creates a route of the same name. E.g. for pages/users.tsx:

abc.com/users

If the file is in a nested directory, the directory is also part of the path. E.g. for pages/settings/main.tsx:

abc.com/settings/main

Index files don't add to the path. Instead, they match the path of their parent. E.g. for pages/users/index.tsx:

abc.com/users

As seen above, a route file can clash with a nested index file:

users.tsx
users/index.tsx
## abc.com/users

Next.js detects such conflicts and requests us to keep only one of those files.

File-based routing

We describe the pages router, which works with a pages/ directory.

pages directory content

The pages/ directory contains:

route files and route directories

wildcard files such as [book].tsx

special files (see Special files)

route files and route directories

A route file creates a route of the same name. E.g. for pages/users.tsx:

abc.com/users

If the file is in a nested directory, the directory is also part of the path. E.g. for pages/settings/main.tsx:

abc.com/settings/main

Index files don't add to the path. Instead, they match the path of their parent. E.g. for pages/users/index.tsx:

abc.com/users

route conflict

As seen above, a route file can clash with a nested index file:

users.tsx users/index.tsx ## abc.com/users

Next.js detects such conflicts and requests us to keep only one of those files.