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

ลองใช้ 2 วิธีที่คุณเพิ่ม AMP ลงในแอป Next.js ได้

Houssein Djirdeh

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

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

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;