مسیرهای داینامیک

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

قرارداد

یک بخش داینامیک را می‌توان با قرار دادن نام یک پوشه در براکت‌های مربعی ایجاد کرد: [folderName]. به عنوان مثال، [id] یا [slug].

بخش‌های داینامیک به عنوان ویژگی params به توابع layout page، route و generateMetadata پاس داده می‌شوند.

مثال

برای مثال، یک وبلاگ می‌تواند شامل مسیر زیر باشد: app/blog/[slug]/page.js که در آن [slug] بخش داینامیک برای پست‌های وبلاگ است.

app/blog/[slug]/page.tsx

export default function Page({ params }: { params: { slug: string } }) {
	return <div>My Post: {params.slug}</div>
}

مسیر	URL مثال	`params`
`app/blog/[slug]/page.js`	`/blog/a`	`{ slug: 'a' }`
`app/blog/[slug]/page.js`	`/blog/b`	`{ slug: 'b' }`
`app/blog/[slug]/page.js`	`/blog/c`	`{ slug: 'c' }`

برای یادگیری نحوه ایجاد پارامترها برای بخش، به صفحه generateStaticParams() مراجعه کنید.

خوب است بدانید: بخش‌های داینامیک معادل با مسیرهای داینامیک در پوشه pages هستند.

تولید پارامترهای استاتیک

تابع generateStaticParams را می توان در ترکیب با بخش های مسیر داینامیک برای ایجاد استاتیک مسیرها در زمان ساخت به جای زمان درخواست استفاده کرد.

app/blog/[slug]/page.tsx

export async function generateStaticParams() {
	const posts = await fetch('https://.../posts').then((res) => res.json())
 
	return posts.map((post) => ({
		slug: post.slug,
	}))
}

مزیت اصلی تابع generateStaticParams بازیابی هوشمندانه داده ها است. اگر محتوا با استفاده از درخواست fetch داخل تابع generateStaticParams فراخوانی شود، درخواست ها به طور خودکار یادداشت شده (memoized) می شوند. این بدان معناست که یک درخواست fetch با آرگومان‌های مشابه در چندین generateStaticParams، طرح بندی ها (Layouts) و صفحات فقط یک بار انجام می‌شود که باعث کاهش زمان ساخت می‌شود.

اگر از دایرکتوری pages مهاجرت می‌کنید، از راهنمای مهاجرت استفاده کنید.

برای اطلاعات بیشتر و موارد استفاده پیشرفته، به مستندات تابع سرور generateStaticParams server function documentation مراجعه کنید.

بخش‌های همه گیر

بخش‌های داینامیک را می‌توان با اضافه کردن یک بیضی (سه نقطه) داخل براکت‌ها [...folderName] برای گرفتن تمام بخش‌های بعدی، گسترش داد.

به عنوان مثال، app/shop/[...slug]/page.js با /shop/clothes همخوانی دارد، اما همچنین با /shop/clothes/tops، /shop/clothes/tops/t-shirts و غیره هم همخوانی دارد.

مسیر	URL مثال	`params`
`app/shop/[...slug]/page.js`	`/shop/a`	`{ slug: ['a'] }`
`app/shop/[...slug]/page.js`	`/shop/a/b`	`{ slug: ['a', 'b'] }`
`app/shop/[...slug]/page.js`	`/shop/a/b/c`	`{ slug: ['a', 'b', 'c'] }`

بخش‌های همه گیر اختیاری

بخش‌های همه گیر را می‌توان با قرار دادن پارامتر در داخل براکت‌های مربعی دوتایی، اختیاری کرد: [[...folderName]].

برای مثال، app/shop/[[...slug]]/page.js علاوه بر /shop/clothes، /shop/clothes/tops و /shop/clothes/tops/t-shirts با /shop نیز مطابقت خواهد داشت.

تفاوت بین بخش‌های همه گیر و بخش‌های همه گیر اختیاری این است که در حالت اختیاری، مسیری که پارامتر ندارد نیز مطابقت پیدا می‌کند (/shop در مثال بالا).

مسیر	URL مثال	`params`
`app/shop/[[...slug]]/page.js`	`/shop`	`{}`
`app/shop/[[...slug]]/page.js`	`/shop/a`	`{ slug: ['a'] }`
`app/shop/[[...slug]]/page.js`	`/shop/a/b`	`{ slug: ['a', 'b'] }`
`app/shop/[[...slug]]/page.js`	`/shop/a/b/c`	`{ slug: ['a', 'b', 'c'] }`

تایپ اسکریپت

هنگام استفاده از TypeScript، می‌توانید بر اساس بخش مسیر پیکربندی شده، برای params نوع تعریف کنید.

app/blog/[slug]/page.tsx

export default function Page({ params }: { params: { slug: string } }) {
	return <h1>My Page</h1>
}

Route	`params` Type Definition
`app/blog/[slug]/page.js`	`{ slug: string }`
`app/shop/[...slug]/page.js`	`{ slug: string[] }`
`app/shop/[[...slug]]/page.js`	`{ slug?: string[] }`
`app/[categoryId]/[itemId]/page.js`	`{ categoryId: string, itemId: string }`

خوب است بدانید: ممکن است این کار در آینده توسط افزونه TypeScript به صورت خودکار انجام شود.

سازماندهی پروژه مسیرهای موازی