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

<noinclude>{{DISPLAYTITLE:دعم صفحات AMP في Next.js}}</noinclude>
تتيح لك Next.js تحويل صفحات React إلى [https://amp.dev/ صفحات AMP] بأقل قدر من الإعدادات ودون أن تتخلى عن React. ولتمكين دعم Next.js لصفحات AMP والتعرّف على الإعدادات المختلفة لهذه الصفحات راجع [[Next.js/next amp|توثيق الواجهة البرمجية للمكوّن <code>next/amp</code>]].

إن لم تكن تعرف AMP، فارجع إلى موقعها الرسمي [https://amp.dev/ amp.dev].

== محاذير على دعم AMP في Next.js ==

* لا تدعم Next.js سوى CSS-in-JS لأن [[Next.js/build in css support|وحدات CSS]] غير مدعومة من قبل صفحات AMP حاليًا.

== إضافة مكوّنات AMP في Next.js ==
يقدِّم مجتمع Next.js العديد من [https://amp.dev/documentation/components/ المكوِّنات] لتحسين تفاعلية صفحات AMP. وتُدرج Next.js تلقائيًا جميع المكوّنات المستخدمة في الصفحة ولا حاجة لإدراج شيفرة مكونات AMP يدويًا:<syntaxhighlight lang="javascript">
export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage
</syntaxhighlight>يستخدم المثال السابق المكوّن <code>[https://amp.dev/documentation/components/amp-timeago/?format=websites amp-timeago]</code> الذي تُدرج Next.js النسخة الأحدث منه افتراضيًا. وبإمكانك أن تخصص النسخة التي تريد من خلال المكوّن <code>next/head</code> كما في المثال التالي:<syntaxhighlight lang="javascript">
import Head from 'next/head'

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <Head>
        <script
          async
          key="amp-timeago"
          custom-element="amp-timeago"
          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
        />
      </Head>

      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage
</syntaxhighlight>

== التحقق من صفحات AMP ==
يجري التحقق من صفحات AMP تلقائيًا باستخدام [https://www.npmjs.com/package/amphtml-validator amphtml-validator] خلال مرحلة التطوير، وستظهر الأخطاء والتنبيهات على الطرفية حيثما تُشغّل Next.js. كما يجري التحقق من الصفحات أيضًا أثناء [[Next.js/static html export|التصدير الساكن لصفحات HTML]] وستُطبع أية أخطاء أو تنبيهات على شاشة الطرفية. ستسبب أخطاء AMP إنهاء التصدير مع رمز الحالة <code>1</code> نظرًا لفشل تصدير AMP.

=== مدققات مخصصة ===
بإمكانك استخدام مدقق AMP مخصص عبر الملف <code>next.config.js</code> كما في الشيفرة التالية:<syntaxhighlight lang="javascript">
module.exports = {
  amp: {
    validator: './custom_validator.js',
  },
}
</syntaxhighlight>

=== تجاوز التدقيق عن صفحات AMP ===
لتعطيل التدقيق في صفحات AMP أضف الشيفرة التالية إلى ملف <code>next.config.js</code>:<syntaxhighlight lang="javascript">
experimental: {
  amp: {
    skipValidation: true
  }
}
</syntaxhighlight>

== دعم صفحات AMP أثناء التصدير الساكن لملفات HTML ==
عندما تستخدم <code>next export</code> لتنفيذ عملية التصيير المسبق prerender للصفحات خلال التصدير الساكن لملفات HTML، تكتشف Next.js إن كانت صفحات AMP مدعومة ومن ثم تغيّر سلوك التصدير وفقًا لذلك. إذ ستعطي مثلًا الصفحة الهجينة <code>pages/about.js</code> في خرجها ما يلي:

* <code>out/about.html</code>: صفحة HTML مع دعم لشيفرة React من ناحية العميل أثناء التشغيل.
* <code>out/about.amp.html</code>: وهي صفحة AMP.

وإن كانت الصفحة <code>pages/about.js</code> هي صفحة AMP فقط سيكون الخرج هو:

* <code>out/about.html</code>: صفحة AMP محسّنة.

تضع Next.js تلقائيًا رابطًا إلى نسخة AMP من صفحتك ضمن نسخة HTML كالتالي:<syntaxhighlight lang="html">
<link rel="amphtml" href="/about.amp.html" />
</syntaxhighlight>كما ستضم نسخة AMP من صفحتك رابطًا إلى نسخة HTML:<syntaxhighlight lang="html">
<link rel="canonical" href="/about" />
</syntaxhighlight>وعندما يُفعّل الخيار [[Next.js/next.config.js|<code>trailingSlash</code>]] ستكون الصفحات المصدّرة عن <code>pages/about.js</code> كالتالي:

* <code>out/about/index.html</code>: صفحة HTML.
* <code>out/about.amp/index.html</code>: صفحة AMP.

== استخدام TypeScript مع صفحات AMP في Next.js ==
لا تدعم AMP حاليًا أنواعًا مدمجة خاصة بلغة TypeScript لكنها [https://github.com/ampproject/amphtml/issues/13791 قيد التطوير]. وللالتفاف على هذا النقص، بإمكانك أن تنشأ يدويًا ملفًا يُدعى <code>amp.d.ts</code> في مشروعك ومن ثم إضافة [https://stackoverflow.com/a/50601125 أنواع مخصصة تجريبية].

== أمثلة ==

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

== المصادر ==

* صفحات [https://nextjs.org/docs/advanced-features/amp-support/introduction AMP Support] من توثيق Next.js الرسمي.
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
[[تصنيف:Next.js Advanced Features|{{SUBPAGENAME}}]]