Next.js / المتوسط: السلطة والحداثة وتجربة المسار / الدرس 12
البيانات الوصفية والأصول وتجربة المسار المتاحة
انشر بيانات وصفية وأصولاً مقصودة مع حفظ الخصوصية وثبات التخطيط وسهولة التنقل.
في هذه الصفحة
أهداف الدرس
- افصل بيانات المسار العامة عن تفاصيل المصدر الخاصة.
- اشرح أبعاد الصورة والمصادر البعيدة المعتمدة والتغذية الراجعة المتاحة.
البيانات الوصفية تمثيل عام آخر
يمكن أن يقرأ الزاحف العنوان والوصف والرابط والمعاينة أو تشارك خارج الواجهة. لا تضع اسماً خاصاً أو معرف مستخدم أو خطأ داخلياً لأن الصفحة تتطلب دخولاً. تختلف حاجة الثابت وgenerateMetadata، وتطبق الديناميكية سياسة المحتوى. راجع وراثة التخطيط والتجاوز كنتيجة مركبة. يخدم العنوان المرئي وعنوان الوثيقة مستخدمين متداخلين مختلفين فاجعلهما مفيدين لا اسماً عاماً لكل صفحة. قد تكون البيانات نفسها قانونية داخل حساب لكنها غير مناسبة لمعاينة رابط ترسل إلى طرف آخر، لذلك يحتاج الجمهور قراراً مستقلاً عن مجرد إمكانية الوصول إلى الصفحة.
عرف سطح بيانات وصفية عامة صغيراً
يعلن الجزء عنوان مكتبة عامة ووصفها دون بيانات خاصة أو أصل ضمني. يستعمل التطبيق أساساً موثوقاً للروابط لا Host غير متحقق. عند انتظار params أو مصدر في generateMetadata طبق العقد غير المتزامن والغياب الآمن. لم تعرض بيانات أو تزحف أو تقيم. لا يثبت كائن حرفي خرج head النهائي أو الوراثة أو تدفق البيانات الوصفية. يراجع الاختبار الحقيقي الصفحة الناتجة بعد التركيب ليتأكد أن تجاوز مسار لم يترك وصفاً أو عنواناً موروثاً غير مناسبين للجمهور المقصود.
import type {Metadata} from "next";
export const metadata:Metadata={
title:"Public course library",
description:"Browse the synthetic public learning catalog."
};القيم اصطناعية مناسبة للعامة، ولم يشغل مترجم أو head أو زاحف.
حسن الأصول بعقد مصدر وتخطيط صريح
قد تساعد next/image على الحجم المناسب، وتحتاج المصدر وalt والأبعاد أو fill وsizes قرارات صريحة. احجز مساحة لتقليل القفز ووصف المفيد وتعامل مع الزينة بما يناسب. ضيق remotePatterns للمضيف والمسار المقصودين ولا تحول التحسين لجلب عشوائي. يغير النشر والتصدير توفر الخدمة. تحتاج الخطوط وسياسة أصول البناء مراجعة ولا تفترض أن بناء بلا شبكة يجلب الخارج. لا يكفي استعمال المكون المحسن إذا كانت كل الصور تطلب بحجم أكبر من العرض أو يحمل النص البديل معلومة غير مرتبطة بالصورة الفعلية.
ابن الروابط العامة المعتمدة من أصل موثوق
تجمع الدالة أصلاً HTTPS اصطناعياً ثابتاً وslug مرمزاً، ولا تستخدم ترويسة أو أصل مستخدم. يتحقق التطبيق من الاسم قبلها؛ يحفظ الترميز البنية لا التفويض أو عمومية البيانات. تفحص التأكيدات الناتج دون شبكة. يتحقق الحقيقي من الأساس واللغة وسياسة استعلام canonical حتى لا تصبح جلسة خاصة أو مرشح رابط مشاركة عام دون قصد. لا يثبت اختيار أصل ثابت ملكية اسم نطاق فعلي، بل يجعل مصدر القرار ظاهراً وقابلاً للمراجعة بدلاً من اعتماده على قيمة طلب يقدر المستدعي على تعديلها.
function publicUrl(slug) {
return new URL(`/courses/${encodeURIComponent(slug)}`,"https://learn.example.invalid").href;
}
console.assert(publicUrl("server-components") === "https://learn.example.invalid/courses/server-components");
console.assert(publicUrl("a/b").includes("a%2Fb"));يبقى الأصل ثابتاً ويرمز الفاصل داخل القيمة دون جلب أو تحويل أو عرض بيانات وصفية.
تحقق من استعمال المسار كاملاً لا مظهره فقط
وفر عناوين دلالية وحقولاً مسماة وروابط لوحة مفاتيح وخطأ مرتبطاً. تحافظ الانتقالات على بؤرة وحالة مفهومتيْن لا تبديل شاشة بلا سياق. لا تثبت درجة صورة سريعة إكمال المهمة. اختبر اتجاه العربية وتسمياتها بجانب الإنجليزية. يشغل المقرر منشئ الرابط فقط دون صورة وخط وبيانات وصفية وقارئ شاشة أو تخطيط. يحتاج التحقق البناء والمتصفح ببيانات اصطناعية مأذونة وحدود تقرير صريحة. يظل فحص دالة URL نافعاً ولا يغني عن تجربة مسار يتفاعل معه مستخدم فعلي أو أداة مساعدة.
الأخطاء الشائعة وإصلاحها
تظهر تفاصيل خاصة في معاينة مشاركة
- لماذا يحدث؟
- لم تراجع البيانات الوصفية كتمثيل عام مستقل.
- كيف تصلحه؟
- طبق الجمهور واختر بيانات عامة ضيقة.
- كيف تتجنب تكراره؟
- اختبر العنوان والوصف والمعاينة مع منع الوصول.
تسبب صورة قفزات تخطيط كبيرة
- لماذا يحدث؟
- لم يحجز التخطيط المساحة المقصودة للصورة.
- كيف تصلحه؟
- استخدم أبعاداً صحيحة أو حاوية fill محددة وsizes مناسبة.
- كيف تتجنب تكراره؟
- تحقق من التخطيط المتجاوب بأصول ممثلة.
يثق رابط canonical بمضيف يقدمه المستدعي
- لماذا يحدث؟
- أصبحت بيانات الطلب سلطة لتحديد الأصل العام.
- كيف تصلحه؟
- استخدم أصلاً مضبوطاً موثوقاً وسياسة مسار صريحة.
- كيف تتجنب تكراره؟
- اختبر ادعاءات مضيف بديلة دون طلبات خارجية.
اختبر فهمك
1. هل يفوض منشئ URL بأصل ثابت نشر عنوان المقرر؟
اعرض الحل المشروح
لا. يبني URL حتمية بأصل مختار، ويحتاج نشر المقرر وعنوانه سياسة كائن وجمهور مستقلة. احتفظ بالاختبار ثم افحص البيانات المعروضة فعلاً للسجل المؤهل والممنوع والغائب وفق عقد المسار.
2. لماذا لا ينهي استخدام next/image مراجعة الإتاحة أو الأداء؟
اعرض الحل المشروح
يختار المطور المصدر والأبعاد وsizes والتخطيط والوصف، ويدعم النشر مسار التحسين المطلوب. قد ترسل الخيارات الخاطئة بايتات زائدة أو تجعل الصورة بلا معنى للأداة المساعدة. اختبر المسار والمهمة ولا تعتبر اسم المكون دليل نجاح.
أهم ما تعلمته
- للبيانات الوصفية والأصول عقود جمهور ومصدر ودورة حياة.
- يحتاج سلوك المسار المتاح دليل متصفح ومهمة فعلياً.