From e0fded70b40fb716c94fbe451331cfcefa537925 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Thu, 12 Dec 2024 19:37:20 +0000 Subject: [PATCH] Delete 02-page.mdx --- .../01-routing/02-pages.mdx | 58 ------------------- .../03-file-conventions/page.mdx | 9 ++- 2 files changed, 8 insertions(+), 59 deletions(-) delete mode 100644 docs/01-app/03-building-your-application/01-routing/02-pages.mdx diff --git a/docs/01-app/03-building-your-application/01-routing/02-pages.mdx b/docs/01-app/03-building-your-application/01-routing/02-pages.mdx deleted file mode 100644 index 2f63d5a46be40..0000000000000 --- a/docs/01-app/03-building-your-application/01-routing/02-pages.mdx +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Pages -description: Create your first page in Next.js -related: - links: - - app/building-your-application/routing/layouts-and-templates - - app/building-your-application/routing/linking-and-navigating ---- - -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 - -```tsx filename="app/page.tsx" switcher -// `app/page.tsx` is the UI for the `/` URL -export default function Page() { - return

Hello, Home page!

-} -``` - -```jsx filename="app/page.js" switcher -// `app/page.js` is the UI for the `/` URL -export default function Page() { - return

Hello, Home page!

-} -``` - -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: - -```tsx filename="app/dashboard/page.tsx" switcher -// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL -export default function Page() { - return

Hello, Dashboard Page!

-} -``` - -```jsx filename="app/dashboard/page.js" switcher -// `app/dashboard/page.js` is the UI for the `/dashboard` URL -export default function Page() { - return

Hello, Dashboard Page!

-} -``` - -> **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](/docs/app/building-your-application/rendering/server-components) by default, but can be set to a [Client Component](/docs/app/building-your-application/rendering/client-components). -> - Pages can fetch data. View the [Data Fetching](/docs/app/building-your-application/data-fetching) section for more information. diff --git a/docs/01-app/04-api-reference/03-file-conventions/page.mdx b/docs/01-app/04-api-reference/03-file-conventions/page.mdx index f4e47ba896b3a..fb7556724bda0 100644 --- a/docs/01-app/04-api-reference/03-file-conventions/page.mdx +++ b/docs/01-app/04-api-reference/03-file-conventions/page.mdx @@ -3,7 +3,7 @@ title: page.js description: API reference for the page.js file. --- -The `page` file is used to define a page in your Next.js application. +The `page` file allows you to define UI that is **unique** to a route. You can create a page by default exporting a component from the file: ```tsx filename="app/blog/[slug]/page.tsx" switcher export default function Page({ @@ -23,6 +23,13 @@ export default function Page({ params, searchParams }) { } ``` +## Good to know + +- The `.js`, `.jsx`, or `.tsx` file extensions can be used for `page`. +- A `page` is always the **leaf** of the route subtree. +- A `page` file is required to make a route segment **publicly accessible**. +- Pages are [Server Components](https://react.dev/reference/rsc/server-components) by default, but can be set to a [Client Component](https://react.dev/reference/rsc/use-client). + ## Reference ### Props