mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Zack TannerandGitHub
f431600ce4
Reverts vercel/next.js#58596 This is failing lint checks [x-ref](https://github.com/vercel/next.js/actions/runs/7109843046/job/19355454595)
58 lines
2.1 KiB
Plaintext
58 lines
2.1 KiB
Plaintext
---
|
|
title: page.js
|
|
description: API reference for the page.js file.
|
|
---
|
|
|
|
A **page** is UI that is unique to a route.
|
|
|
|
```tsx filename="app/blog/[slug]/page.tsx" switcher
|
|
export default function Page({
|
|
params,
|
|
searchParams,
|
|
}: {
|
|
params: { slug: string }
|
|
searchParams: { [key: string]: string | string[] | undefined }
|
|
}) {
|
|
return <h1>My Page</h1>
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/blog/[slug]/page.js" switcher
|
|
export default function Page({ params, searchParams }) {
|
|
return <h1>My Page</h1>
|
|
}
|
|
```
|
|
|
|
## Props
|
|
|
|
### `params` (optional)
|
|
|
|
An object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) from the root segment down to that page. For example:
|
|
|
|
| Example | URL | `params` |
|
|
| ------------------------------------ | ----------- | ------------------------------ |
|
|
| `app/shop/[slug]/page.js` | `/shop/1` | `{ slug: '1' }` |
|
|
| `app/shop/[category]/[item]/page.js` | `/shop/1/2` | `{ category: '1', item: '2' }` |
|
|
| `app/shop/[...slug]/page.js` | `/shop/1/2` | `{ slug: ['1', '2'] }` |
|
|
|
|
### `searchParams` (optional)
|
|
|
|
An object containing the [search parameters](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) of the current URL. For example:
|
|
|
|
| URL | `searchParams` |
|
|
| --------------- | -------------------- |
|
|
| `/shop?a=1` | `{ a: '1' }` |
|
|
| `/shop?a=1&b=2` | `{ a: '1', b: '2' }` |
|
|
| `/shop?a=1&a=2` | `{ a: ['1', '2'] }` |
|
|
|
|
> **Good to know**:
|
|
>
|
|
> - `searchParams` is a **[Dynamic API](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions)** whose values cannot be known ahead of time. Using it will opt the page into **[dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)** at request time.
|
|
> - `searchParams` returns a plain JavaScript object and not a `URLSearchParams` instance.
|
|
|
|
## Version History
|
|
|
|
| Version | Changes |
|
|
| --------- | ------------------ |
|
|
| `v13.0.0` | `page` introduced. |
|