المسارات الديناميكية
عندما لا تعرف أسماء الأجزاء مسبقًا وتريد إنشاء مسارات من بيانات ديناميكية، يمكنك استخدام أجزاء ديناميكية يتم تعبئتها وقت الطلب أو تتم معالجتها مسبقًا وقت البناء.
الاصطلاح
يمكن إنشاء جزء ديناميكي عن طريق لف اسم ملف أو مجلد بين أقواس مربعة: [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 | { slug: [] } |
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'] } |