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

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

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

On this page