useAmp

دعم AMP هو أحد ميزاتنا المتقدمة، يمكنك قراءة المزيد عن AMP هنا.

لتمكين AMP، أضف التكوين التالي إلى صفحتك:

export const config = { amp: true }

يقبل تكوين amp القيم التالية:

• true - ستكون الصفحة AMP فقط
• 'hybrid' - سيكون للصفحة نسختان، واحدة بـ AMP وأخرى بـ HTML

للمزيد عن تكوين amp، اقرأ الأقسام أدناه.

صفحة AMP الأولى

انظر إلى المثال التالي:

export const config = { amp: true }

function About(props) {
  return <h3>صفحتي حول AMP!</h3>
}

export default About

الصفحة أعلاه هي صفحة AMP فقط، مما يعني:

• لا تحتوي الصفحة على وقت تشغيل Next.js أو React من جانب العميل
• يتم تحسين الصفحة تلقائيًا باستخدام AMP Optimizer، وهو محسن يطبق نفس التحويلات مثل ذاكرة التخزين المؤقت لـ AMP (يحسن الأداء بنسبة تصل إلى 42٪)
• تحتوي الصفحة على نسخة يمكن للمستخدم الوصول إليها (مُحسنة) ونسخة يمكن لمحركات البحث فهرستها (غير مُحسنة)

صفحة AMP الهجينة

انظر إلى المثال التالي:

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

function About(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>صفحتي حول AMP!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="صورة رائعة"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="صورة رائعة" />
      )}
    </div>
  )
}

export default About

الصفحة أعلاه هي صفحة AMP هجينة، مما يعني:

• يتم عرض الصفحة كـ HTML تقليدي (افتراضي) وAMP HTML (بإضافة ?amp=1 إلى الرابط)
• تحتوي نسخة AMP من الصفحة فقط على تحسينات صالحة تم تطبيقها باستخدام AMP Optimizer بحيث يمكن لمحركات البحث فهرستها

تستخدم الصفحة useAmp للتمييز بين الوضعين، وهو خطاف React يُرجع true إذا كانت الصفحة تستخدم AMP، وfalse في الحالة الأخرى.