วิธีใช้ AMP ใน Next.js

ลองใช้ 2 วิธีในการเพิ่ม AMP ลงในแอป Next.js

ฮูสเซน จอร์เดห์

สิ่งที่คุณจะได้เรียนรู้

Codelab นี้ช่วยให้คุณลองใช้ AMP ในแอป Next.js ได้ 2 วิธี ดูวิธีที่ AMP รับประกันความรวดเร็วในแอป Next.js เพื่อดูเหตุผลที่คุณอาจต้องเพิ่มการรองรับ AMP ในแอป Next.js

วิธีสร้างหน้า AMP แบบไฮบริด

วิธีการ AMP แบบผสมจะสร้างหน้า Next.js เวอร์ชัน AMP ควบคู่ไปด้วย ที่ผ่านมาเราใช้แนวทางแบบผสมอยู่บ่อยครั้งเมื่อมีประสบการณ์การใช้งานในหน้าเว็บเวอร์ชันหลักที่ 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. หากต้องการดูแหล่งที่มา ให้กดดูแหล่งที่มา

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-img ของ AMP:

   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;