الواجهة البرمجية للمكوّن next/amp في Next.js

يُعد دعم صفحات AMP أحد الميزات المتقدمة في Next.js، ويمكن الاطلاع أكثر عليها في صفحة توثيق AMP

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

export const config = { amp: true }

يقبل الإعداد amp القيمتين التاليتين:

• true: ستكون الصفحة عندها AMP فقط.
• hybrid: سيكون للصفحة نسختان الأولى AMP والثانية HTML.

صفحة AMP الأولى

ألق نظرة على المثال التالي:

export const config = { amp: true }

function About(props) {
  return <h3>My AMP About Page!</h3>
}

export default About

إن الصفحة في المثال السابق هي صفحة AMP فقط ويعني ذلك:

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

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

ألق نظرة على المثال التالي:

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

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

  return (
    <div>
      <h3>My AMP About Page!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="a cool image"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
      )}
    </div>
  )
}

export default About

إنّ الصفحة في المثال السابق هي صفحة AMP هجينة ويعني ذلك:

• تُصيَّر الصفحة كصفحة HTML تقليدية (سلوك افتراضي) وكصفحةAMP HTML (بإضافة اللاحقة amp=1? إلى عنوان URL)

• لصفحة AMP نسخة واحدة محسّنة بواسطة محسّن AMP، لهذا لا يمكن فهرستها في محركات البحث.

تَستخدم الصفحة useAmp للتمييز بين النمطين السابقين، وهو خطاف يعيد القيمة true إن كانت الصفحة AMP و false إن كانت غير ذلك.

المصادر

• الصفحة Next/amp من توثيق Next.js الرسمي.