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

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

Houssein Djirdeh

ماذا ستتعلم؟

يتيح لك هذا الدرس التطبيقي حول الترميز تجربة الطريقتين اللتين يمكنك من خلالهما استخدام صفحات 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. لعرض المصدر، اضغط على View Source (عرض المصدر).

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;