كيفية إنشاء صفحات AMP في Next.js

أمثلة

مع Next.js يمكنك تحويل أي صفحة React إلى صفحة AMP بحد أدنى من التكوين ودون الحاجة إلى مغادرة React.

يمكنك قراءة المزيد عن AMP في الموقع الرسمي amp.dev.

تمكين AMP

لتمكين دعم AMP لصفحة ما، ولمعرفة المزيد حول تكوينات AMP المختلفة، اقرأ وثائق API لـ next/amp.

محاذير

يتم دعم CSS-in-JS فقط. وحدات CSS غير مدعومة حاليًا في صفحات AMP. يمكنك المساهمة في دعم وحدات CSS لـ Next.js.

إضافة مكونات AMP

يوفر مجتمع AMP العديد من المكونات لجعل صفحات 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/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

يتم التحقق تلقائيًا من صفحات 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 الثابت

عند استخدام تصدير HTML ثابت لتصيير الصفحات مسبقًا بشكل ثابت، سيكتشف Next.js ما إذا كانت الصفحة تدعم AMP وسيغير سلوك التصدير بناءً على ذلك.

على سبيل المثال، ستخرج صفحة 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 حاليًا على أنواع مضمنة لـ TypeScript، لكنها موجودة في خارطة طريقهم (#13791).

كحل بديل، يمكنك إنشاء ملف يدويًا باسم amp.d.ts داخل مشروعك وإضافة هذه الأنواع المخصصة.

كيفية إنشاء صفحات AMP في Next.js

On this page