دعم صفحات AMP في Next.js

تتيح لك Next.js تحويل صفحات React إلى صفحات AMP بأقل قدر من الإعدادات ودون أن تغادر React. ولتمكين دعم Next.js لصفحات AMP والتعرّف على الإعدادات المختلفة لهذه الصفحات راجع توثيق الواجهة البرمجية للمكوّن next/amp.

التحفظات على دعم AMP في Next.js

لا تدعم Next.js سوى CSS-in-JS لأن وحدات CSS غير مدعومة من قبل صفحات AMP حاليًا.

إضافة مكوّنات AMP في Next.js

يقدِّم مجتمع Next.js العديد من المكوِّنات لتحسين تفاعلية صفحات AMP. وتُدرج Next.js تلقائيًا جميع المكوّنات المستخدمة في الصفحة ولا حاجة لإدراج شيفرة مكونات AMP يدويًا:

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

يستخدم المثال السابق المكوّن amp-timeago الذي تُدرج Next.js النسخة الأحدث منه افتراضيًا. وبإمكانك أن تخصص النسخة التي تريد من خلال المكوّن next/head كما في المثال التالي:

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

التحقق من صفحات AMP في Next.js

يجري التحقق من صفحات AMP تلقائيًا باستخدام amphtml-validator خلال مرحلة التطوير، وستظهر الأخطاء والتنبيهات على الطرفية حيثما تُشغّل Next.js. كما يجري التحقق من الصفحات أيضًا أثناء التصدير الساكن لصفحات HTML وستُطبع أية أخطاء أو تنبيهات على شاشة الطرفية. ستسبب أخطاء AMP إنهاء التصدير مع رمز الحالة 1 نظرًا لفشل تصدير AMP.

محققات مخصصة

بإمكانك استخدام محقق AMP مخصص عبر الملف next.config.js كما في الشيفرة التالية:

module.exports = {
  amp: {
    validator: './custom_validator.js',
  },
}

تجاوز التحقق من صفحات AMP

لتعطيل التحقق من صفحات AMP أضف الشيفرة التالية إلى ملف next.config.js:

experimental: {
  amp: {
    skipValidation: true
  }
}

دعم صفحات AMP أثناء التصدير الساكن لملفات HTML

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

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

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

out/about.html: صفحة AMP محسّنة.

تضع Next.js تلقائيًا رابطًا إلى نسخة AMP من صفحتك ضمن نسخة HTML كالتالي:

<link rel="amphtml" href="/about.amp.html" />

كما ستضم نسخة AMP من صفحتك رابطًا إلى نسخة HTML:

<link rel="canonical" href="/about" />

وعندما يُفعّل الخيار trailingSlash ستكون الصفحات المصدّرة عن pages/about.js كالتالي:

out/about/index.html: صفحة HTML.
out/about.amp/index.html: صفحة AMP.

استخدام TypeScript مع صفحات AMP في Next.js

لا تدعم AMP حاليًا أنواعًا مدمجة خاصة بلغة TypeScript لكنها قيد التطوير. وللالتفاف على هذا النقص، بإمكانك أن تنشأ يدويًا ملفًا يُدعى amp.d.ts في مشروعك ومن ثم إضافة أنواع مخصصة تجريبية.

المصادر

صفحات AMP Support من توثيق Next.js الرسمي.