الفرق بين المراجعتين لصفحة: «Next.js/amp support»

المراجعة الحالية بتاريخ 16:59، 4 يناير 2023

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

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

محاذير على دعم 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

يجري التحقق من صفحات 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 لتنفيذ عملية التصيير المسبق prerender للصفحات خلال التصدير الساكن لملفات 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

المصادر

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

@@ سطر 1: / سطر 1: @@
+<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 في Next.js =
+إن لم تكن تعرف AMP، فارجع إلى موقعها الرسمي [https://amp.dev/ amp.dev].
-تتيح لك Next.js تحويل صفحات React إلى [https://amp.dev/ صفحات AMP] بأقل قدر من الإعدادات ودون أن تغادر React. ولتمكين دعم Next.js لصفحات AMP والتعرّف على الإعدادات المختلفة لهذه الصفحات راجع [[Next.js/next amp|توثيق الواجهة البرمجية للمكوّن <code>next/amp</code>]].
-== التحفظات على دعم AMP في Next.js ==
+== محاذير على دعم AMP في Next.js ==
 * لا تدعم Next.js سوى CSS-in-JS لأن [[Next.js/build in css support|وحدات CSS]] غير مدعومة من قبل صفحات AMP حاليًا.
 == إضافة مكوّنات AMP في Next.js ==
-يقدِّم مجتمع العديد من [https://amp.dev/documentation/components/ المكوِّنات] لتحسين تفاعلية صفحات AMP. وتُدرج Next.js تلقائيًا جميع المكوّنات المستخدمة في صفحة ولا حاجة لإدراج شيفرة مكونات AMP يدويًا:<syntaxhighlight lang="javascript">
+يقدِّم مجتمع Next.js العديد من [https://amp.dev/documentation/components/ المكوِّنات] لتحسين تفاعلية صفحات AMP. وتُدرج Next.js تلقائيًا جميع المكوّنات المستخدمة في الصفحة ولا حاجة لإدراج شيفرة مكونات AMP يدويًا:<syntaxhighlight lang="javascript">
 export const config = { amp: true }
@@ سطر 30: / سطر 31: @@
 export default MyAmpPage
-</syntaxhighlight>يستخدم المثال السابق المكوّن  <code>amp-timeago</code> الذي تُدرج Next.js النسخة الأحدث منه افتراضيًا. وبإمكانك أن تخصص النسخة التي تريد من خلال المكوّن <code>next/head</code> كما في المثال التالي:<syntaxhighlight lang="javascript">
+</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'
@@ سطر 65: / سطر 66: @@
 </syntaxhighlight>
-== التحقق من صفحات AMP في Next.js ==
+== التحقق من صفحات 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 تلقائيًا باستخدام [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">
+بإمكانك استخدام مدقق AMP مخصص عبر الملف <code>next.config.js</code> كما في الشيفرة التالية:<syntaxhighlight lang="javascript">
 module.exports = {
    amp: {
@@ سطر 77: / سطر 78: @@
 </syntaxhighlight>
-=== تجاوز التحقق من صفحات AMP ===
+=== تجاوز التدقيق عن صفحات AMP ===
-لتعطيل التحقق من صفحات AMP أضف الشيفرة التالية إلى ملف <code>next.config.js</code>:<syntaxhighlight lang="javascript">
+لتعطيل التدقيق في صفحات AMP أضف الشيفرة التالية إلى ملف <code>next.config.js</code>:<syntaxhighlight lang="javascript">
 experimental: {
    amp: {
@@ سطر 87: / سطر 88: @@
 == دعم صفحات AMP أثناء التصدير الساكن لملفات HTML ==
-عندما تستخدم <code>next export</code> لتنفيذ عملية التصيير المسبق للصفحات خلال التصدير الساكن لملفات HTML، تكتشف Next.js إن كانت صفحات AMP مدعومة ومن ثم تغيّر سلوك التصدير وفقًا لذلك. إذ ستعطي مثلًا الصفحة الهجينة <code>pages/about.js</code> في خرجها ما يلي:
+عندما تستخدم <code>next export</code> لتنفيذ عملية التصيير المسبق prerender للصفحات خلال التصدير الساكن لملفات HTML، تكتشف Next.js إن كانت صفحات AMP مدعومة ومن ثم تغيّر سلوك التصدير وفقًا لذلك. إذ ستعطي مثلًا الصفحة الهجينة <code>pages/about.js</code> في خرجها ما يلي:
 * <code>out/about.html</code>: صفحة HTML مع دعم لشيفرة React من ناحية العميل أثناء التشغيل.
@@ سطر 102: / سطر 103: @@
 </syntaxhighlight>وعندما يُفعّل الخيار [[Next.js/next.config.js|<code>trailingSlash</code>]] ستكون الصفحات المصدّرة عن <code>pages/about.js</code> كالتالي:
-* <code>out/about/index.html</code> : صفحة HTML.
+* <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 قيد التطوير]. وللالتفاف على هذا النقصن بإمكانك أن تنشأ يدويًا ملفًا يُدعى في مشروعك ومن ثم إضافة [https://stackoverflow.com/a/50601125 أنواع مخصصة تجريبية].
+لا تدعم 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}}]]