المسارات الديناميكية
عندما لا تعرف أسماء المقاطع مسبقًا وتريد إنشاء مسارات من بيانات ديناميكية، يمكنك استخدام مقاطع ديناميكية يتم ملؤها وقت الطلب أو تتم معالجتها مسبقًا وقت البناء.
الاصطلاح
يمكن إنشاء مقطع ديناميكي عن طريق لف اسم ملف أو مجلد بين أقواس مربعة: [اسم المقطع]. على سبيل المثال، [id] أو [slug].
يمكن الوصول إلى المقاطع الديناميكية من خلال useRouter.
مثال
على سبيل المثال، يمكن أن يتضمن المدون المسار التالي pages/blog/[slug].js حيث [slug] هو المقطع الديناميكي لمقالات المدونة.
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return <p>المقال: {router.query.slug}</p>
}| المسار | مثال URL | params |
|---|---|---|
pages/blog/[slug].js | /blog/a | { slug: 'a' } |
pages/blog/[slug].js | /blog/b | { slug: 'b' } |
pages/blog/[slug].js | /blog/c | { slug: 'c' } |
مقاطع التقاط الكل
يمكن توسيع المقاطع الديناميكية لتشمل جميع المقاطع اللاحقة عن طريق إضافة نقاط داخل الأقواس [...اسم المقطع].
على سبيل المثال، pages/shop/[...slug].js ستطابق /shop/clothes، وكذلك /shop/clothes/tops، /shop/clothes/tops/t-shirts، وهكذا.
| المسار | مثال URL | params |
|---|---|---|
pages/shop/[...slug].js | /shop/a | { slug: ['a'] } |
pages/shop/[...slug].js | /shop/a/b | { slug: ['a', 'b'] } |
pages/shop/[...slug].js | /shop/a/b/c | { slug: ['a', 'b', 'c'] } |
مقاطع التقاط الكل الاختيارية
يمكن جعل مقاطع التقاط الكل اختيارية عن طريق تضمين المعلمة بين أقواس مربعة مزدوجة: [[...اسم المقطع]].
على سبيل المثال، pages/shop/[[...slug]].js ستطابق أيضًا /shop، بالإضافة إلى /shop/clothes، /shop/clothes/tops، /shop/clothes/tops/t-shirts.
الفرق بين مقاطع التقاط الكل والتقاط الكل الاختيارية هو أن مع الاختيارية، يتم أيضًا مطابقة المسار بدون المعلمة (/shop في المثال أعلاه).
| المسار | مثال URL | params |
|---|---|---|
pages/shop/[[...slug]].js | /shop | { slug: undefined } |
pages/shop/[[...slug]].js | /shop/a | { slug: ['a'] } |
pages/shop/[[...slug]].js | /shop/a/b | { slug: ['a', 'b'] } |
pages/shop/[[...slug]].js | /shop/a/b/c | { slug: ['a', 'b', 'c'] } |