אפשר לנסות את שתי הדרכים להוספת 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;
לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא
.
מוסיפים
?amp=1
בסוף כתובת ה-URL. הדף נראה זהה, אבל אם תסתכלו במסוף יופיע עיבוד של גרסת ה-AMP של הדף.
![הדף הפעיל וההודעה במסוף כלי הפיתוח ל-Chrome שמציינת שהדף מופעל באמצעות AMP.](https://web.dev/static/articles/how-to-use-amp-in-nextjs/image/the-live-page-a-message-da2dbcd870547.png?authuser=5&hl=he)
מכיוון שהדף מכיל רק תג <p>
אחד, אין הבדל נראה בין
את הדף הראשי ואת גרסת ה-AMP שלו.
איך להציג באופן מותנה רכיבי AMP
דפי AMP צריכים לכלול קבוצה משלהם של רכיבים חוקיים, במקום רכיבי HTML רבים. זו
חשוב לוודא שרכיבי ה-AMP מוצגים באופן מותנה רק בדף ה-AMP.
Next.js מספק הוק (hook) בשם useAmp
כדי לאפשר הצגה מותנית של רכיבים שונים
בהתאם לגרסה של הדף שנשלחה.
כדי להציג את המקור, מקישים על הצגת מקור.
יש לערוך את
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;
טוענים את הגרסה הראשית של הדף:
מוסיפים שוב את
?amp=1
בסוף כתובת ה-URL כדי לטעון את גרסת ה-AMP של הדף:כדאי לנסות לעבד את ההחלפה של תג התמונה על ידי 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 כדי לקבל מידע נוסף על הרכיב הזה ואופטימיזציות.להציג שוב את הגרסה הראשית של הדף.
בודקים שוב את גרסת ה-AMP של הדף.
איך יוצרים דפים מסוג AMP בלבד
Next.js תומך גם בדפים מסוג AMP בלבד. בשיטה הזו, דף AMP אחד מוצג ועובר רינדור למשתמשים ולמנועי חיפוש כל הזמן.
כדי לעבד דף 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;