فحص موقع Next.js
يتحقق Scanverra من كيفية عرض تطبيق Next.js لديك - على الخادم، أو بشكل ثابت، أو من جانب العميل - ويرصد مشكلات next/image وMetadata API والترطيب (hydration) التي تكلفك نقاطًا في مؤشرات الويب الأساسية دون أن تلاحظ.
ما الذي نفحصه في Next.js
ستة فحوصات خاصة بطريقة عرض App Router للمحتوى وشحن الكود فعليًا.
استراتيجية العرض لكل مسار
ما إذا كان المسار يُعرض من الخادم، أو يُولَّد بشكل ثابت، أو يُشحن كإطار فارغ يُملأ من جانب العميل - وما إذا كان هذا الخيار يناسب المحتوى. صفحة تسويقية تُعرض بالكامل من جانب العميل لا تترك للزاحف شيئًا يقرأه عند أول رسم للصفحة.
اعتماد next/image
وسوم <img> الخام المستخدمة بدلًا من next/image، والصور التي تفتقد إلى width/height (أو fill) - وهو المزيج الذي يسبب إزاحة التخطيط عندما تظهر الصور فجأة بأبعادها الحقيقية.
تغطية Metadata API
عنوان الصفحة، والوصف، ووسم الرابط الأساسي، وبيانات Open Graph لكل مسار مقارنة بتصدير بيانات وصفية جذري واحد يُعاد استخدامه - أو يكون مفقودًا - عبر كل صفحة.
الفصل بين مكونات العميل والخادم
توجيهات "use client" غير الضرورية الموضوعة في مستوى مرتفع من شجرة المكونات، والتي تسحب شجرة فرعية كاملة - وكل ما تستورده - إلى حزمة المتصفح بينما كان يكفي جزء تفاعلي صغير فقط.
تعارضات الترطيب (Hydration)
ترميز مُعرَض من الخادم لا يطابق ما ينتجه React على جانب العميل، وغالبًا ما ينتج عن Date.now() أو Math.random() أو استدعاء واجهة API خاصة بالمتصفح أثناء العرض. تظهر هذه كأخطاء في وحدة التحكم وتؤثر سلبًا على درجة أفضل الممارسات.
رؤوس الأمان على مستوى الاستجابة
ما إذا كانت رؤوس مثل HSTS وX-Frame-Options وما شابهها مضبوطة بشكل عام - يتيح لك Next.js فعل ذلك مرة واحدة في دالة headers() ضمن next.config بدلًا من ترك كل مسار على إعداداته الافتراضية.
How it works
ثلاث خطوات من الرابط إلى إصلاحات خاصة بـ Next.js.
الصق رابط موقع Next.js لديك
دون الحاجة للوصول إلى المستودع ودون خطوة بناء - نفحص الصفحة المنشورة الحية بنفس الطريقة التي يفعلها المتصفح أو الزاحف.
نتحقق من إشارات App Router
رؤوس الاستجابة مثل x-powered-by: Next.js، ومسارات الأصول /_next/static/، وحمولة __NEXT_DATA__ تخبرنا أننا أمام تطبيق Next.js قبل بدء الفحص.
احصل على إصلاحات خاصة بـ Next.js
تُكتب كل مشكلة استنادًا إلى إطار العمل الذي تستخدمه فعليًا - إرشادات next/image وMetadata API، وليست نصائح عامة.
Frequently asked questions
هل يعرف Scanverra إن كنت أستخدم App Router أم Pages Router؟
يكتشف أن الموقع يعمل بـ Next.js من رؤوس الاستجابة ومسارات أصول البناء، ثم يطبق فحوصات تعمل مع أي من الموجّهين - فهو لا يحتاج إلى التمييز بينهما لفحص العرض والصور والبيانات الوصفية.
هل سيكتشف الفحص وسم <img> خام نسيت استبداله بـ next/image؟
نعم. تظهر الصور غير المُحسَّنة والصور التي تفتقد إلى width/height كمشكلات في مؤشرات الويب الأساسية وأفضل الممارسات، بنفس الطريقة التي تظهر بها في تقرير Lighthouse.
هل يمكنه إخباري إن كانت صفحة معينة تُعرض بالكامل من جانب العميل؟
يفحص الفحص ملف HTML الفعلي المُسلَّم عند التحميل الأول. الصفحة التي تحتوي على محتوى قليل أو معدوم قبل تشغيل JavaScript ستظهر كمشكلة في وضوح المحتوى وSEO - وهو ما يدل عادةً على أنها تُعرض من جانب العميل دون أي شيء مُعرَض من الخادم في الأساس.
هل يتحقق تحديدًا من إعداد Metadata API لدي؟
يتحقق من الناتج - العنوان، والوصف التعريفي، ووسم الرابط الأساسي، وبيانات Open Graph على الصفحة المُعرَضة - بغض النظر عما إذا كنت قد أنشأتها باستخدام Metadata API أو مكون Head أو وسوم مكتوبة يدويًا.
هل ستظهر أخطاء الترطيب في تقريري؟
أخطاء وحدة التحكم جزء من درجة أفضل الممارسات، وتعارضات الترطيب من أكثر الطرق شيوعًا لظهورها في تطبيق Next.js.
هل أحتاج إلى النشر قبل أن أتمكن من فحص موقعي؟
نعم - يفحص Scanverra رابطًا حيًا وقابلًا للوصول إليه علنًا. عنوان localhost أو نسخة معاينة محمية بكلمة مرور لن يعمل.
فحوصات تقنية أخرى
شاهد مؤشرات الويب الأساسية لموقع Next.js لديك في أقل من دقيقة
العرض، والصور، والبيانات الوصفية، والترطيب - مقيَّمة وموضحة استنادًا إلى إطار العمل الذي نشرته فعليًا.
Run free audit