Create a public route
Expose a top-level route such as /dashboard.
Next.js 16+ · Directive
page
Use a page file to define UI unique to an App Router route. Put it in a route folder and default-export a React component; the file makes that route segment publicly accessible.
How it works
In the App Router, a page is the route's leaf UI. Create a nested folder for the URL segment, then add a page file that default-exports a React component; Next.js renders that component at the resulting public route. The page file may use JavaScript, JSX, or TypeScript extensions and is wrapped by other conventions in its segment.
Syntax
export default function Page() { return <main>...</main> }Returns
The default-exported React component renders the unique UI for the route.
Key points
- Use a page file for UI belonging specifically to one route.
- The page module must default-export its React component.
- JavaScript, JSX, and TypeScript page modules are supported.
- A page occupies the final position in its route branch.
- Within a segment, page is the innermost special file convention.
Common mistakes
- A page cannot contain further route segments beneath itself; place child routes in nested folders.
Example: A public App Router page
// app/blog/page.tsx
export default function BlogPage() {
return <h1>Blog</h1>
}Place this file in the app/blog directory to expose the /blog route.
When to use it
Build nested routes
Render different UI for a nested URL segment such as /blog.
Compose route UI
Use a route-specific component while shared wrappers remain in the segment's layouts.
Interview questions
QWhat is a page in the App Router, and how do you create one?
A page defines UI unique to one route and is created by default-exporting a React component from a page file. Its containing folders determine the URL segment.
Follow-up: What makes the route public? The segment needs a page file; a folder by itself is not publicly accessible.
QWhich file extensions can an App Router page use?
The supported extensions are .js, .jsx, and .tsx. The file must default-export the component that represents the route's unique UI.
Follow-up: Where does page.js sit in the component hierarchy? It is the innermost convention and is wrapped by loading, error, template, and layout files in the same segment.
QHow does a page file relate to folders and URLs?
Folders define the route hierarchy, while the page file makes the final segment accessible. Therefore, app/blog/page.tsx maps to /blog.
Follow-up: How would you add a child route? Create another folder below the parent route and put its own page file there.
Related
layoutloadingerrortemplaterouteApp Router