مسیرهای پویا

زمانی که نمی‌توانید برای هر محصول یا مقاله یک پوشه دستی بسازید، از مسیرهای پویا استفاده کنید.

استفاده از براکت [ ]

گذاشتن نام پوشه داخل براکت، آن را به یک متغیر تبدیل می‌کند (مثل [slug]). برای خواندن این متغیر در کامپوننت‌های سمت سرور، از ویژگی params استفاده می‌کنیم:

// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  return <h1>شناسه مقاله: {slug}</h1>
}

پارامترهای جستجو (Query Params)

برای خواندن مقادیر بعد از علامت سوال در آدرس (مثل ?page=2)، از ویژگی searchParams در سمت سرور استفاده می‌شود:

// app/page.tsx
export default async function Page({ searchParams }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
  const page = (await searchParams).page
  return <p>صفحه فعلی: {page}</p>
}

• سمت سرور: از searchParams مستقیم در خود کامپوننت استفاده کنید.

• سمت کلاینت: از هوک اختصاصی useSearchParams استفاده کنید.