What is the hierarchy of all routing files?

Q: What is the hierarchy of all routing files?

layout.js template.js error.js (React error boundary) loading.js (React suspense boundary) not-found.js (React error boundary) page.js or nested layout.js

Difficulty: 6/10

file-system routing, dynamic routes, catch‑all routes

The React components defined in special files of a route segment are rendered in a specific hierarchy:

1
layout.js
2
template.js
3
error.js (React error boundary)
4
loading.js (React suspense boundary)
5
not-found.js (React error boundary)
6
page.js or nested layout.js

Scenario Questions

0-2 years experience

1You need to add a new page at /about in a Next.js app. Which file do you create and where should it live in the project structure?
2If you place a file named `blog/[slug].js` under the `pages` directory, what URL pattern will it match and how does Next.js resolve the route?
3What happens if you create both `pages/index.js` and `pages/home.js`? Which one will be served at the root URL?

Follow-up Questions