Next.js / الأساسي: المسارات وحدود التنفيذ / الدرس 2
مسارات الملفات والتخطيطات والمعاملات غير المتزامنة
ركب مقاطع المسار والتخطيطات المشتركة وانتظر المعاملات وفق عقد Next 16 المختار.
في هذه الصفحة
أهداف الدرس
- اشرح أدوار page وlayout والمقطع الديناميكي ومجموعة المسارات.
- تحقق من params المحلولة بدلاً من الثقة ببنية المسار.
شجرة المجلدات عقد مسار عام
تجعل page.tsx المقطع قابلاً للعرض وتحيط layout.tsx الأبناء بواجهة مشتركة. يملك الجذر html وbody، وتقدم [id] قيماً فعلية، وتنظم الأقواس المجموعات دون إضافة اسمها للعنوان. لا تفوض الاتفاقات بيانات المسار. افصل الشكل العام والمستأجر وهوية المجال؛ فقد يكسر تغيير مجلد الروابط والبيانات والعملاء كتغيير موجه صريح. راجع URL الناتجة لا كل اسم مجلد. لا يثبت وجود مقطع tenant أن المستخدم عضو فيه، كما لا يحول اسم خاص بالمشروع إلى حد خصوصية تلقائي ما لم يبق خارج مخرجات العرض المقصودة.
انتظر معاملات المسار قبل استعمالها
يستعمل الجزء params كوعد وينتظره قبل مساعد خادمي يفترض فرض الأهلية وإرجاع بطاقة ضيقة. لا يتحقق الانتظار من id أو يثبت جلسة أو يختار مخبأ؛ تبقى القرارات صريحة. موضعه المفترض app/courses/[id]/page.tsx ولم يشغل موجه أو مترجم. يتبع الوصول غير المتزامن المطلوب في Next 16 لا توافقاً متزامناً أقدم. يجب أن يقرر المساعد معنى غياب المقرر وفشل مصدره، حتى لا يصبح كل رفض وصول صفحة ناجحة فارغة بسبب تعويض ضمني في العرض.
export default async function CoursePage({params}:{params:Promise<{id:string}>}) {
const {id}=await params;
const card=await getVisibleCourseCard(id);
return <h1>{card.title}</h1>;
}يفترض المساعد والاستيراد وJSX، وينتظر الجزء params دون ترجمة أو عرض.
عمر التخطيط المشترك ليس حداثة طلب لكل صفحة
قد يعاد استخدام التخطيط بالتنقل فلا تجعل منه ضمان إعادة منطق الصفحة مع كل انتقال. اقرأ حالة URL في الصفحة أو hook مناسب ولا تفترض إعادة تقييم searchParams في تخطيط محفوظ. تختلف دورة template عند الحاجة لإعادة التركيب. أبق فحوص الأمن في البيانات والكتابة ولو عرض التخطيط بوابة دخول؛ إخفاء الأبناء لا يحمي مساراً أو فعلاً مباشراً. يهم ذلك خصوصاً عندما يستبقي العميل إطار الصفحة ثم يتغير الحساب أو المرشح، فلا ينبغي أن تصبح صورة الواجهة القديمة دليلاً على صلاحية العمل الحالي.
تحقق من معرف مسار اصطناعي محلياً
يقبل الشرط كلمات slug صغيرة محدودة مفصولة بشرطة ويرفض الشبيه بالمسار والفواصل المتكررة وفق الاتفاق. قد تختار واجهة معرفاً معتماً أو Unicode فلا تعمم الصياغة. فك URL ومصفوفة catch-all شأن نقل مستقل. تحقق من الشكل المحلول قبل المصدر ولا تحول النص لمسار ملف مباشرة. تثبت العينة سياسة معرف ضيقة لا حل params أو صلاحية الكائن. تبقى أهلية المستأجر والنسخة المطلوبة والتصنيف العام جزءاً من المجال الذي لا يستطيع تعبير نمطي عن الاسم تقريره.
function validSlug(value) {return typeof value === "string" && value.length <= 60 && /^[a-z]+(?:-[a-z]+)*$/.test(value);}
console.assert(validSlug("server-components"));
console.assert(!validSlug("../private"));
console.assert(!validSlug("server--components"));ينجح الاسم المعلن ويرفض الشبيه بالمسار والفصل المكرر دون مطابقة أو فك نقل.
راجع المجموعات والتداخل والاستثناءات كشجرة واحدة
احفظ عينات الجذر والتداخل والمفقود وnot-found والأساس العام. قد تتعارض مجموعة إذا أنتجت URL نفسها، وتختلف أشكال catch-all والاختياري وسلوك الجذر. ضع الكود قرب المسار بقصد ولا تنشر page في مقطع خطأ. يفحص المقرر slug فقط دون تخطيط أو template أو مجموعة أو خصائص Next. يحتاج التحقق بناء وتنقلاً معزولين لفحص الشجرة والحالة المحفوظة. لا يحول نجاح المحلل المحلي اسم مجلد إلى دليل على أن رابطاً قديماً سيستمر بالعمل بعد إعادة تنظيم ملفات المشروع.
الأخطاء الشائعة وإصلاحها
تقرأ params.id تزامنياً
- لماذا يحدث؟
- نقل عقد قديم لخصائص الطلب إلى مشروع Next 16.
- كيف تصلحه؟
- انتظر params وفق عقد الصفحة أو Route Handler المختار.
- كيف تتجنب تكراره؟
- احتفظ بعينات انتقال الوصول إلى الخصائص غير المتزامنة.
تغير مجموعة افتراض رابط دون توقع
- لماذا يحدث؟
- اختلط تنظيم المجلدات بمقاطع العنوان العامة الناتجة.
- كيف تصلحه؟
- راجع شجرة المسارات العامة التي ينتجها تركيب المجلدات فعلياً.
- كيف تتجنب تكراره؟
- اختبر مجموعات المسارات التي قد تنتج URL العامة نفسها.
تسمى بوابة التخطيط تفويضاً كاملاً
- لماذا يحدث؟
- حلت بوابة تركيب الواجهة محل حماية مصدر البيانات وعمليات الكتابة.
- كيف تصلحه؟
- افرض السياسة في كل مدخل خادم وفي طبقة الوصول إلى البيانات.
- كيف تتجنب تكراره؟
- اختبر Route Handlers وServer Actions المباشرة إلى جانب التنقل.
اختبر فهمك
1. هل يجعل انتظار params معرف المقرر موثوقاً؟
اعرض الحل المشروح
لا. يحل الانتظار قيمة الإطار غير المتزامنة فقط. ما زالت النتيجة تحتاج تحققاً من شكلها وأهلية الوصول إلى كائنها وعقداً مقصوداً للمصدر. قد يحدد slug صحيح البنية مقرراً ممنوعاً. افصل تحليل المسار عن التفويض، واختبر المعرف نفسه بمستدع مؤهل وآخر غير مؤهل.
2. لماذا لا تضع كل قرارات الحداثة والصلاحية في تخطيط مشترك؟
اعرض الحل المشروح
قد يستمر التخطيط أثناء انتقالات العميل، ويمكن لمداخل خادم أخرى تجاوز تلك الواجهة. يستطيع التخطيط عرض التنقل وسياق المستخدم، لكن طبقة البيانات وكل عملية كتابة يجب أن تفرض السلطة الحالية بصورة مستقلة. اختبر الحالة التي يحفظها التخطيط وسلوك المداخل المباشرة، بدلاً من افتراض أن كل نقرة تعيد تركيب الغلاف المشترك.
أهم ما تعلمته
- تركب اتفاقات الملفات العنوان وعمر الواجهة.
- تبقى قيم المسار المحلولة إدخالاً غير موثوق.