ลองใช้ 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;
คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
เพิ่ม
?amp=1
ต่อท้าย URL หน้าเว็บยังดูเหมือนกัน แต่ถ้าคุณดูในคอนโซล คุณจะเห็นว่ากำลังแสดงผลหน้าเว็บเวอร์ชัน AMP
เนื่องจากหน้านี้มีแท็ก <p>
เพียงแท็กเดียว จึงไม่เห็นความแตกต่างระหว่างหน้าหลักกับเวอร์ชัน AMP
วิธีแสดงคอมโพเนนต์ AMP อย่างมีเงื่อนไข
หน้า AMP จำเป็นต้องมีชุดคอมโพเนนต์ที่ถูกต้องของตนเองแทนองค์ประกอบ HTML จำนวนมาก จึงควรตรวจสอบว่าคอมโพเนนต์ AMP แสดงอย่างมีเงื่อนไขสำหรับหน้า AMP เท่านั้น
Next.js มีฮุกที่เรียกว่า 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-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 เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพขององค์ประกอบนั้นดูหน้าเวอร์ชันหลักอีกครั้ง
ดูหน้าเวอร์ชัน AMP อีกครั้ง
วิธีสร้างหน้า AMP เท่านั้น
Next.js ยังรองรับหน้า AMP เท่านั้นด้วย ด้วยวิธีการนี้ จะมีการแสดงผลและแสดงผลหน้า AMP เดียวแก่ผู้ใช้และเครื่องมือค้นหาตลอดเวลา
หากต้องการแสดงหน้า 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;