page.js در Next.js — ساخت صفحات پویا با پارامترهای مسیر و جستجو

۱. تعریف صفحه با page.js

برای ساخت یک صفحه، کافیست کامپوننتی را به‌صورت default export از فایل page.js یا page.tsx ارائه دهید.

// app/blog/[slug]/page.tsx
export default function Page({ params, searchParams }) {
  return <h1>My Page</h1>
}

۲. پارامترهای مسیر (params)

پارامترهای مسیر به‌صورت Promise ارسال می‌شوند و باید با async/await یا use() خوانده شوند.

// app/shop/[slug]/page.tsx
export default async function Page({ params }) {
  const { slug } = await params
  return <h1>Product: {slug}</h1>
}

۳. پارامترهای جستجو (searchParams)

پارامترهای جستجو از query string استخراج می‌شوند و به‌صورت Promise ارسال می‌شوند.

// app/shop/page.tsx
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>
  )
}

۴. استفاده در کامپوننت‌های کلاینتی

در Client Componentها، چون نمی‌توان از async استفاده کرد، باید از use() برای خواندن params و searchParams استفاده شود.

'use client'
import { use } from 'react'

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

۵. استفاده از PageProps برای تایپ دقیق

با استفاده از PageProps می‌توان تایپ دقیق‌تری برای params و searchParams داشت.

// app/blog/[slug]/page.tsx
export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params
  const query = await props.searchParams
  return <h1>Blog Post: {slug}</h1>
}

۶. نکات مهم

• فایل page.js همیشه برگ نهایی (leaf) در ساختار مسیر است
• برای دسترسی عمومی به یک segment، وجود page.js الزامی است
• به‌صورت پیش‌فرض Server Component است، اما می‌توان آن را با 'use client' به Client Component تبدیل کرد
• استفاده از searchParams باعث فعال شدن رندر داینامیک در زمان درخواست می‌شود

جمع‌بندی

فایل page.js در Next.js امکان ساخت صفحات پویا، قابل فیلتر، و قابل شخصی‌سازی را فراهم می‌کند. با استفاده از params و searchParams می‌توان محتوای مسیر را بر اساس URL و query string مدیریت کرد و تجربه‌ای سریع و واکنش‌گرا برای کاربر ساخت.