عرض مصدر Next.js/next amp

<noinclude>{{DISPLAYTITLE:الواجهة البرمجية للمكوّن next/amp في Next.js}}</noinclude>
<blockquote>يُعد دعم صفحات AMP أحد الميزات المتقدمة في Next.js، ويمكن الاطلاع أكثر عليها في صفحة [[Next.js/amp support|توثيق AMP]].</blockquote>لتمكين دعم صفحات AMP أضف الإعداد التالي إلى صفحتك:<syntaxhighlight lang="javascript">
export const config = { amp: true }
</syntaxhighlight>يقبل الإعداد <code>amp</code> القيمتين التاليتين:

* <code>true</code>: ستكون الصفحة عندها AMP فقط.
* <code>'hybrid'</code>: سيكون للصفحة نسختان الأولى AMP والثانية HTML.

== صفحة AMP الأولى ==
ألق نظرة على المثال التالي:<syntaxhighlight lang="javascript">
export const config = { amp: true }

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

export default About
</syntaxhighlight>إن الصفحة في المثال السابق هي صفحة AMP فقط ويعني ذلك:

* لا تمتلك الصفحة مُشغِّل Next.js أو React من طرف العميل.
* الصفحة محسّنة تلقائيًا من خلال [https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer محسّن AMP] المدمج الذي يطبق نفس التحويلات عندما تُخزّن صفحة AMP مؤقتًا (مما يحسن الأداء بنسبة 42%).
* للصفحة نسخة يمكن للمستخدم الوصول إليها (محسّنة) ونسخة يمكن فهرستها من قبل محركات البحث (غير محسّنة).

== صفحات AMP الهجينة ==
ألق نظرة على المثال التالي:<syntaxhighlight lang="javascript">
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
</syntaxhighlight>إنّ الصفحة في المثال السابق هي صفحة AMP هجينة ويعني ذلك:

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

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

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

== أمثلة ==

* [https://github.com/vercel/next.js/tree/canary/examples/amp AMP]

== المصادر ==

* الصفحة [https://nextjs.org/docs/api-reference/next/amp Next/amp] من توثيق Next.js الرسمي.
[[تصنيف:Next.js]]
[[تصنيف:Next.js API]]