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