AMP

أمثلة

مع 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>بعض الوقت: {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>بعض الوقت: {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

حاليًا لا يوجد أنواع مضمنة لـ TypeScript في AMP، لكنها موجودة في خطتهم المستقبلية (#13791).

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

On this page