زمانی که نمیتوانید برای هر محصول یا مقاله یک پوشه دستی بسازید، از مسیرهای پویا استفاده کنید.
[ ]گذاشتن نام پوشه داخل براکت، آن را به یک متغیر تبدیل میکند (مثل [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>
}
برای خواندن مقادیر بعد از علامت سوال در آدرس (مثل ?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 استفاده کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app