איך משתמשים ב-AMP ב-Next.js

אפשר לנסות את שתי הדרכים להוספת AMP לאפליקציית Next.js

Houssein Djirdeh

כדי לעקוב אחר ה-Codelab הזה, פותחים את התקלה הזו בכרטיסייה שנייה.

מה תלמדו?

בעזרת ה-Codelab הזה אפשר לנסות את שתי הדרכים שבהן אפשר להשתמש ב-AMP באפליקציה Next.js. מומלץ לקרוא את המאמר איך טכנולוגיית AMP יכולה להבטיח מהירות באפליקציית Next.js כדי להבין למה מומלץ להוסיף תמיכה ב-AMP לאפליקציית Next.js.

איך יוצרים דפי AMP היברידיים

זהירות: הגישה של AMP בלבד היא הנתיב המומלץ לשימוש ב-AMP עם Next.js. לגישת AMP המשולבת שמתוארת בקטע הזה יש עלות תחזוקה גבוהה יותר מהגישה של AMP בלבד, כי כדי להשתמש בה צריך לתחזק שתי גרסאות של כל דף. מומלץ להשתמש בגישה המשולבת רק אם אתם בטוחים שהגישה של דפי 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 מספק הוק (hook) בשם 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 באובייקט config ל-true.

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