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