Skip to content
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:

page.js special file
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.