ملف page.js

يسمح لك ملف page بتحديد واجهة المستخدم (UI) الفريدة لمسار معين. يمكنك إنشاء صفحة عن طريق تصدير مكون بشكل افتراضي من الملف:

export default function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  return <h1>My Page</h1>
}

export default function Page({ params, searchParams }) {
  return <h1>My Page</h1>
}

معلومات مفيدة

يمكن استخدام امتدادات الملفات .js أو .jsx أو .tsx لملف page.
ملف page هو دائمًا الورقة الأخيرة في شجرة المسار الفرعي.
مطلوب وجود ملف page لجعل جزء المسار يمكن الوصول إليه بشكل عام.
الصفحات هي مكونات خادم (Server Components) بشكل افتراضي، ولكن يمكن تعيينها كمكون عميل (Client Component).

المرجع

الخصائص (Props)

`params` (اختياري)

وعد (Promise) يحل إلى كائن يحتوي على معلمات المسار الديناميكي من الجزء الجذري وصولاً إلى تلك الصفحة.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
}

export default async function Page({ params }) {
  const { slug } = await params
}

مثال للمسار	URL	`params`
`app/shop/[slug]/page.js`	`/shop/1`	`Promise<{ slug: '1' }>`
`app/shop/[category]/[item]/page.js`	`/shop/1/2`	`Promise<{ category: '1', item: '2' }>`
`app/shop/[...slug]/page.js`	`/shop/1/2`	`Promise<{ slug: ['1', '2'] }>`

بما أن خاصية params هي وعد (Promise)، يجب عليك استخدام async/await أو دالة use في React للوصول إلى القيم.
- في الإصدار 14 وما قبله، كانت params خاصية متزامنة (synchronous). للمساعدة في التوافق مع الإصدارات السابقة، لا يزال بإمكانك الوصول إليها بشكل متزامن في Next.js 15، ولكن هذا السلوك سيتم إهماله في المستقبل.

`searchParams` (اختياري)

وعد (Promise) يحل إلى كائن يحتوي على معلمات البحث (search parameters) لـ URL الحالي. على سبيل المثال:

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const filters = (await searchParams).filters
}

export default async function Page({ searchParams }) {
  const filters = (await searchParams).filters
}

مثال لـ URL	`searchParams`
`/shop?a=1`	`Promise<{ a: '1' }>`
`/shop?a=1&b=2`	`Promise<{ a: '1', b: '2' }>`
`/shop?a=1&a=2`	`Promise<{ a: ['1', '2'] }>`

بما أن خاصية searchParams هي وعد (Promise)، يجب عليك استخدام async/await أو دالة use في React للوصول إلى القيم.
- في الإصدار 14 وما قبله، كانت searchParams خاصية متزامنة (synchronous). للمساعدة في التوافق مع الإصدارات السابقة، لا يزال بإمكانك الوصول إليها بشكل متزامن في Next.js 15، ولكن هذا السلوك سيتم إهماله في المستقبل.
searchParams هي واجهة برمجة تطبيقات ديناميكية (Dynamic API) لا يمكن معرفة قيمها مسبقًا. استخدامها سيؤدي إلى اختيار الصفحة لـ التصيير الديناميكي (dynamic rendering) في وقت الطلب.
searchParams هو كائن JavaScript عادي، وليس نسخة من URLSearchParams.

أمثلة

عرض المحتوى بناءً على `params`

باستخدام أجزاء المسار الديناميكي (dynamic route segments)، يمكنك عرض أو جلب محتوى محدد للصفحة بناءً على خاصية params.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}

export default async function Page({ params }) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}

التعامل مع التصفية باستخدام `searchParams`

يمكنك استخدام خاصية searchParams للتعامل مع التصفية، التقسيم إلى صفحات، أو الفرز بناءً على سلسلة الاستعلام (query string) لـ URL.

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const { page = '1', sort = 'asc', query = '' } = await searchParams

  return (
    <div>
      <h1>Product Listing</h1>
      <p>Search query: {query}</p>
      <p>Current page: {page}</p>
      <p>Sort order: {sort}</p>
    </div>
  )
}

export default async function Page({ searchParams }) {
  const { page = '1', sort = 'asc', query = '' } = await searchParams

  return (
    <div>
      <h1>Product Listing</h1>
      <p>Search query: {query}</p>
      <p>Current page: {page}</p>
      <p>Sort order: {sort}</p>
    </div>
  )
}

قراءة `searchParams` و `params` في مكونات العميل (Client Components)

لاستخدام searchParams و params في مكون العميل (Client Component) (الذي لا يمكن أن يكون async)، يمكنك استخدام دالة use في React لقراءة الوعد (Promise):

'use client'

import { use } from 'react'

export default function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const { slug } = use(params)
  const { query } = use(searchParams)
}

'use client'

import { use } from 'react'

export default function Page({ params, searchParams }) {
  const { slug } = use(params)
  const { query } = use(searchParams)
}

سجل الإصدارات

الإصدار	التغييرات
`v15.0.0-RC`	أصبحت `params` و `searchParams` وعودًا (Promises). يتوفر أداة تحويل الشفرات (codemod).
`v13.0.0`	تم تقديم `page`.

On this page