Next.js / الأساسي: المسارات وحدود التنفيذ / الدرس 4
التنقل وحالة URL والروابط الآمنة
مثل الحالة القابلة للمشاركة في URL واحفظ دلالات تنقل آمنة عبر الروابط والخطافات والجلب المسبق.
في هذه الصفحة
أهداف الدرس
- ميز pathname والمعامل الديناميكي ومعامل البحث.
- تحقق من وجهة التنقل وأبق التصيير بلا أثر جانبي.
اختر حالة URL لعرض قابل لإعادة الإنتاج
يناسب URL المرشح والترتيب والمؤشر لتصف المشاركة وإعادة التحميل العرض نفسه، وتبقى بؤرة أو قائمة مفتوحة محلية. يحدد المسار المقاطع ويحمل البحث إدخالاً قد يتكرر أو يغيب. تحقق قبل المصدر. ليس URL لقطة بيانات دائمة؛ يحتاج المؤشر نطاقاً وحداثة. وافق الواجهة مع العنوان المعتمد ولا تنشئ نسختين تختلفان مع الرجوع. قد يحفظ العميل حالة من عرض سابق، لكن رابطاً جديداً ينبغي أن يفسر وفق قيمه الحالية وسياسة المصدر، لا حسب ما تبقى في متغير محلي خفي.
استخدم Link لوجهة داخلية صريحة
يربط الجزء مساراً داخلياً معروفاً ويستعمل URLSearchParams للقيمة، فيحفظ الفاصل داخلها لا كبنية جديدة. لا يجعل وجهة عشوائية آمنة أو يفوض بيانات الهدف. قد يجلب Link عملاً مسبقاً وفق النمط؛ فلا تغير الحالة عند عرض المسار. افصل افتراض Partial Prefetching عن النمط الأساسي. لم يشغل تنقل أو جلب أو تاريخ. يسهل الرابط الصريح مراجعة ما يطلبه المستخدم ويترك التحقق من قيمة البحث للمسار الذي سيستهلكها، إذ الترميز صياغة لا قبول لمفردات المجال.
import Link from "next/link";
const query=new URLSearchParams({view:"summary"}).toString();
export function CourseLink() {
return <Link href={`/courses/server-components?${query}`}>Open course</Link>;
}الوجهة داخلية ثابتة مع view=summary، ولم يعرض JSX أو ينقر Link.
استخدم واجهات App Router في الحد المناسب
تأتي خطافات App Router من next/navigation لا حزمة Pages Router الأقدم. تعرض usePathname وuseSearchParams بُعدين ولا تمنحان سياق تفويض. تخدم خاصية searchParams غير المتزامنة ترشيح الخادم، ويحدث التحكم العنوان برابط أو موجه. حدد إضافة التاريخ بـpush أو تعديل المدخل بـreplace. لا تستدع التنقل بتكرار أثناء التصيير، واحفظ رابطاً متاحاً وحالة انتظار مفيدة. لا تجعل تنقلاً عادياً حدث نقر غامضاً يضيع سلوك فتح تبويب أو دلالة الرابط التي يتوقعها المستخدم وأدوات المساعدة.
ارفض أهداف التحويل المفتوح والشبيهة بالشيفرة
تقبل الدالة مساراً نسبياً يبدأ بـ/courses/ وترفض البروتوكول النسبي ومخطط الشيفرة. تمنع السياسة الضيقة الثقة بأي URL وارد، وليست معقماً كاملاً أو اختبار إطار. يحتاج التصميم الأوسع أصلًا محللًا وقواعد مسار دقيقة، والبادئة اختيار عينة. لا تمرر نص next إلى push أو redirect لمجرد وصوله بمعامل. تحقق وفق الفعل والحد المناسب. لا تختبر العينة فك الترميز أو كل صيغة URL؛ يجب أن يتفق المنتج والمستهلك على توقيت التحليل حتى لا يتجاوز ترميز مزدوج القاعدة الضيقة بعد فحصها.
function safeCourseTarget(value) {
return typeof value === "string" && value.startsWith("/courses/") && !value.startsWith("//");
}
console.assert(safeCourseTarget("/courses/server-components"));
console.assert(!safeCourseTarget("//external.invalid/courses/x"));
console.assert(!safeCourseTarget("javascript:alert(1)"));تنجح الوجهة النسبية المعلنة فقط دون تنقل أو ادعاء تطبيع URL شامل.
راجع التحديث والحفظ وتبدل الهوية
تطلب refresh نتيجة مكون خادم حديثة وتدمجها مع حفظ حالة عميل مناسبة، ولا تبطل كل مخبأ دائم تلقائياً؛ قد تعيد القيمة القديمة نفسها. يعتمد الرجوع والتخطيط على النمط، فاختبره ولا تفترض تركيباً جديداً. بعد الدخول والخروج تقاعد حالة الهوية السابقة وردودها حسب الخصوصية. يشغل المقرر شرط الوجهة فقط دون خطافات أو مخبأ موجه أو متصفح. يوضح الفصل لماذا قد يكون زر تحديث عميل صحيح الاستدعاء ومع ذلك لا يصلح سياسة بيانات خادمية خزنت تمثيلاً بعمر أو جمهور غير مقصودين.
الأخطاء الشائعة وإصلاحها
يختفي المرشح بعد إعادة التحميل
- لماذا يحدث؟
- حفظت حالة عرض قابلة للمشاركة في ذاكرة المكون المحلية فقط.
- كيف تصلحه؟
- مثل المرشحات المقصودة بحالة URL متحقق منها.
- كيف تتجنب تكراره؟
- اختبر إعادة التحميل والرابط المشترك والتنقل إلى الخلف والأمام.
يحول next إلى موقع خارجي
- لماذا يحدث؟
- وثق إدخال يختاره المستدعي باعتباره وجهة تنقل معتمدة.
- كيف تصلحه؟
- طبق سياسة صريحة للوجهات التي يسمح التطبيق بالانتقال إليها.
- كيف تتجنب تكراره؟
- اختبر الأهداف النسبية للبروتوكول والقيم الشبيهة بالشيفرة.
تعيد refresh السجل القديم نفسه
- لماذا يحدث؟
- اختلط تحديث واجهة المسار بإبطال مخبأ بيانات المصدر.
- كيف تصلحه؟
- افحص عقد البيانات الخادمية المعني وأبطل المدخلات المناسبة وفقه.
- كيف تتجنب تكراره؟
- اختبر حالة المخبأ وتحديث المسار كلّاً على حدة.
اختبر فهمك
1. هل يفوض ترميز قيمة الاستعلام العملية التي يقود إليها الرابط؟
اعرض الحل المشروح
لا. يحفظ الترميز بنية URL فقط. يجب على المسار المستقبِل التحقق من المفردات المقبولة وحل هوية المستدعي الحالية وفرض سياسة الكائن. قد يطلب استعلام صحيح البنية بيانات ممنوعة، وقد يقود مسار داخلي ثابت إلى عملية محمية. لذلك افصل صحة الصياغة عن سلطة الوصول.
2. لماذا يجعل الجلب المسبق الآثار الجانبية أثناء التصيير غير آمنة؟
اعرض الحل المشروح
قد يصير الإطار الوجهة أو يجلبها قبل أن يقرر المستخدم الانتقال إليها. عندئذ قد تنفذ كتابة أثناء مرور المؤشر على الرابط أو ظهوره، بدلاً من تنفيذها نتيجة كتابة صريحة من مستدع مصادق عليه. أبق التصيير خالياً من الآثار، واستخدم فعلاً منفصلاً متحققاً منه مع معالجة الإعادة للتغييرات المقصودة.
أهم ما تعلمته
- تحتاج حالة URL تحققاً ومعنى تاريخ مقصوداً.
- تحديث التنقل وإبطال المخبأ الدائم عمليتان مختلفتان.