نحوه استفاده از AMP در Next.js

دو روشی را امتحان کنید که می توانید AMP را به برنامه Next.js اضافه کنید

Houssein Djirdeh

برای دنبال کردن این کد، این Glitch را در یک تب دوم باز کنید.

چه چیزی یاد خواهید گرفت؟

این کد لبه به شما امکان می دهد دو روشی را امتحان کنید که می توانید از AMP در برنامه Next.js استفاده کنید. بررسی کنید چگونه AMP می‌تواند ثبات را در برنامه Next.js شما تضمین کند تا بدانید چرا ممکن است بخواهید پشتیبانی AMP را به برنامه Next.js خود اضافه کنید.

نحوه ایجاد صفحات AMP هیبریدی

احتیاط: رویکرد AMP-only مسیر توصیه شده برای استفاده از AMP با Next.js است. رویکرد AMP ترکیبی که در این بخش توضیح داده شده است، هزینه نگهداری بالاتری نسبت به رویکرد AMP-only دارد، زیرا شما را ملزم به نگهداری دو نسخه از هر صفحه می کند. فقط در صورتی باید از رویکرد هیبریدی استفاده کنید که مطمئن باشید رویکرد فقط AMP کار نخواهد کرد.

رویکرد Hybrid AMP یک نسخه AMP همراه از هر صفحه Next.js ایجاد می کند. در گذشته زمانی که تجربه‌ای در نسخه اصلی صفحه شما وجود داشت که AMP نمی‌توانست از آن پشتیبانی کند، رویکرد هیبریدی اغلب استفاده می‌شد. نسخه اصلی تجربه کاملی داشت در حالی که صفحه AMP تجربه کمی ضعیف داشت. با معرفی amp-script، نیاز کمتری به رویکرد Hybrid وجود دارد، اما در صورتی که هنوز به آن نیاز داشته باشید، در اینجا به آن خواهیم پرداخت.

راه‌های متعددی برای پیکربندی نحوه رندر و سرویس‌دهی صفحات 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. روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.

2. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .

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 صفحه، دوباره ?amp=1 را به انتهای URL اضافه کنید:

   

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 را در شی config به true تغییر دهید.

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