كيفية استخدام صفحات AMP في Next.js

جرِّب الطريقتَين اللتَين يمكنك من خلالهما إضافة صفحات AMP إلى تطبيق Next.js.

حسين جردية

ما الذي ستتعلمه؟

يتيح لك هذا الدرس التطبيقي حول الترميز تجربة طريقتَين لاستخدام صفحات AMP في تطبيق Next.js. يمكنك الاطّلاع على المقالة كيف تضمن صفحات AMP السرعة في تطبيق Next.js لمعرفة السبب الذي قد يدعوك إلى إضافة دعم AMP إلى تطبيق Next.js.

كيفية إنشاء صفحات AMP مختلطة

ينشئ أسلوب صفحات AMP المختلطة نسخة AMP مصاحبة لأي صفحة من صفحات Next.js. سابقًا، كان يتم استخدام الأسلوب "المختلط" بشكل متكرر عندما كانت هناك تجربة على الإصدار الرئيسي لصفحتك لا تتوافق مع AMP. كان للإصدار الرئيسي التجربة الكاملة، في حين كانت تجربة صفحة AMP متدنّية بعض الشيء. مع إطلاق amp-script، لم تعُد هناك حاجة لاستخدام الأسلوب المختلط، لكننا سنتناوله هنا في حال احتجت إليه.

هناك عدة طرق لضبط كيفية عرض Next.js الصفحات وعرضها. ويسمح لك استخدام كائن config بتعديلها على أساس كل صفحة. لعرض صفحة معيّنة كصفحة AMP، عليك تصدير السمة amp في الكائن:

import React from 'react'

export const config = { amp: 'hybrid' };

const Home = () => (
  <p>This is the home page</p>
);

export default Home;

1. انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.

2. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .

3. أضِف ?amp=1 إلى نهاية عنوان URL. تبدو الصفحة بالشكل نفسه، لكن إذا نظرت في وحدة التحكم، فسترى أنه يتم عرض نسخة AMP من الصفحة.

بما أنّ الصفحة تحتوي على علامة <p> واحدة فقط، ما مِن فرق واضح بين الصفحة الرئيسية ونسخة AMP الخاصة بها.

كيفية عرض مكوّنات AMP بشكل مشروط

يجب أن تتضمّن صفحات AMP مجموعة خاصة بها من المكونات الصالحة بدلاً من العديد من عناصر HTML. من المهم التأكّد من عرض مكونات AMP بشكل مشروط على صفحة AMP فقط. توفّر مقتطف Next.js عنصر جذب يُطلق عليه اسم useAmp للسماح لك بعرض عناصر مختلفة بشكل مشروط بناءً على إصدار الصفحة المطلوب.

1. للاطّلاع على المصدر، اضغط على عرض المصدر.

2. عدِّل pages/index.js لكي يتم عرض عنصر فقرة مختلف على الصفحة بناءً على ما إذا تم طلب الإصدار الرئيسي أو نسخة AMP:

   import React from 'react';
   import { useAmp } from 'next/amp';
   
   export const config = { amp: 'hybrid' };
   
   const Home = () => (
     useAmp() ? (
       <p>This is the <strong>AMP</strong> version of the home page</p>
     ) : (
       <p>This is the main version of the home page</p>
     )
   );
   
   export default Home;
   

3. تحميل الإصدار الرئيسي من الصفحة:

   

4. أضِف ?amp=1 إلى نهاية عنوان URL مرّة أخرى لتحميل نسخة AMP من الصفحة:

   

5. جرِّب عرض استبدال AMP لعلامة الصورة amp-img:

   import React from 'react';
   import { useAmp } from 'next/amp';
   
   export const config = { amp: 'hybrid' };
   
   const imgSrc = 'https://placekitten.com/1000/1000';
   
   const Image = () => (
     useAmp() ? (
       <amp-img alt="A cute kitten"
         src={imgSrc}
         width="1000"
         height="1000"
         layout="responsive">
       </amp-img>
     ) : (
       <img alt="A cute kitten"
         src={imgSrc}
         width="1000"
         height="1000">
       </img>
     )
   );
   
   const Home = () => (
     <div>
       <Image />
     </div>
   );
   
   export default Home;
   

   تعرض layout="responsive" تلقائيًا صورة سريعة الاستجابة بالكامل بنسبة عرض إلى ارتفاع يتم تحديدها حسب العرض والارتفاع. يمكنك الاطّلاع على استعلامات التنسيق والوسائط لمعرفة المزيد حول التنسيقات المتوافقة لعناصر AMP، وعلى amp-img لمعرفة المزيد حول التحسينات التي أدخلها هذا العنصر.

6. يمكنك الاطّلاع على النسخة الرئيسية من الصفحة مرة أخرى.

   

7. يمكنك عرض نسخة AMP من الصفحة مرة أخرى.

   

كيفية إنشاء صفحات AMP فقط

يدعم Next.js أيضًا الصفحات ذات التنسيق AMP فقط. وبهذه الطريقة، يتم عرض صفحة AMP واحدة للمستخدمين ومحرّكات البحث في جميع الأوقات.

1. لعرض صفحة AMP فقط، غيِّر قيمة السمة amp في كائن الضبط إلى true.

   import React from 'react'
   
   export const config = { amp: true };
   
   const Home = () => (
     <p>This is an AMP-only page</p>
   );
   
   export default Home;