How is a route formed in the app router?

In the Next.js App Router, a route is formed exclusively by the folder structure and special files inside the app/ directory.

The key idea:

URL = the path of folders from app/ to page.tsx

---

#Basic rule

Every route is a folder that contains a file:

page.tsx

Example:

---

#What is taken into account when forming a route

#1. Folders

Every folder adds a URL segment:

---

#2. page.tsx

• a required file for the route
• it is what forms the page
• without it, the folder is not a route

---

#3. Dynamic segments

Square brackets are used:

• [slug] → route parameter
• available on the server and client

---

#4. Catch-all segments

URL:

• /docs/a
• /docs/a/b/c

---

#5. Optional catch-all

URL:

• /docs
• /docs/a
• /docs/a/b

---

#6. Route Groups (do not affect the URL)

• a folder in ()
• used only for structure
• does not end up in the URL

---

#7. layout.tsx

• does not add a URL segment
• sets the shared shell
• inherited by nested routes

---

#8. Special files

They do not affect the URL, but participate in rendering:

---

#Example of a complex route

Result:

• /blog/my-post
• /login

---

#Common mistake

Thinking that a folder without page.tsx is a route A route exists only when page.tsx is present

---

#Short interview answer

In the App Router, a route is formed based on the path of folders from app/ to page.tsx, with support for dynamic segments, route groups, and special files that control rendering but do not affect the URL.