The page.js Convention
The mandatory file that brings a route to life.
The Leaf of the Route
In the App Router, folders define the paths of your URLs, but folders alone do not create web pages. A route is only publicly accessible if it contains a page.js (or .tsx) file.
The page.js file is the 'leaf' of your routing tree. It defines the unique UI that belongs exclusively to that specific URL path.
Separation of concerns
By separating the unique UI (page.js) from the shared UI (layout.js), Next.js achieves incredibly efficient rendering.
When a user navigates between pages, Next.js knows that it only needs to swap out the page.js content. The surrounding layouts remain completely untouched, preventing unnecessary re-renders and maintaining state (like scroll position or form inputs) in the layout.
Exporting a component
To create a page, you simply create a file exactly named page.tsx inside a folder, and export a default React component.
By default, this component is a React Server Component. This is a massive shift from traditional React: your page.tsx runs on the server, meaning it has direct access to your backend infrastructure.
The Leaf Node
A conceptual view of how page.js slots into the routing tree.
The page.tsx file is isolated from the shared layout. When a user navigates, only the leaf node re-renders, while the surrounding layouts persist without losing their state.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- A route segment requires a
page.jsfile to be publicly accessible. - The
page.jsfile defines the unique UI for that specific path. - By default,
page.jsis a React Server Component. - Because it is a Server Component, a page can be an
asyncfunction that fetches data directly.
Done with this concept?
Mark it complete to track your progress. No login needed.