You are currently viewing documentation for the canary channel of Next.js.
Pages
A page is UI that is unique to a route. You can define a page by default exporting a component from a page.js
file.
For example, to create your index
page, add the page.js
file inside the app
directory:
app/page.tsx
// `app/page.tsx` is the UI for the `/` URL
export default function Page() {
return <h1>Hello, Home page!</h1>
}
Then, to create further pages, create a new folder and add the page.js
file inside it. For example, to create a page for the /dashboard
route, create a new folder called dashboard
, and add the page.js
file inside it:
app/dashboard/page.tsx
// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
return <h1>Hello, Dashboard Page!</h1>
}
Good to know:
- The
.js
,.jsx
, or.tsx
file extensions can be used for Pages.- A page is always the leaf of the route subtree.
- A
page.js
file is required to make a route segment publicly accessible.- Pages are Server Components by default, but can be set to a Client Component.
- Pages can fetch data. View the Data Fetching section for more information.
Next Steps
Was this helpful?