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 Hook يعيد true إذا كانت الصفحة تستخدم AMP، وfalse في الحالات الأخرى.