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

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

חוסיין דג'ירד

מה נלמד?

ב-Codelab הזה תוכלו לנסות את שתי הדרכים שבהן אפשר להשתמש ב-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. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .

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 של הדף, מוסיפים שוב את הטקסט ?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 באובייקט התצורה ל-true.

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