Hãy thử hai cách mà bạn có thể thêm AMP vào ứng dụng Next.js
Bạn sẽ học được gì?
Lớp học lập trình này cho phép bạn thử hai cách để có thể sử dụng AMP trong ứng dụng Next.js. Hãy xem Cách AMP có thể đảm bảo tính nhanh trong ứng dụng Next.js để tìm hiểu lý do bạn có thể muốn thêm hỗ trợ AMP vào ứng dụng Next.js của mình.
Cách tạo trang AMP kết hợp
Phương pháp AMP kết hợp sẽ tạo một phiên bản AMP đi kèm của bất kỳ trang Next.js nào. Trong quá khứ phương pháp Kết hợp thường được sử dụng khi có trải nghiệm trên phiên bản chính của mà AMP không thể hỗ trợ. Phiên bản chính có trải nghiệm đầy đủ trong khi trang AMP một trải nghiệm hơi kém chất lượng. Nhờ sự ra mắt của amp-script, bạn không cần phải về phương pháp Kết hợp, nhưng chúng tôi sẽ đề cập đến phương pháp này ở đây chỉ trong trường hợp bạn vẫn cần đến.
Có nhiều cách để định cấu hình cách Next.js hiển thị và phân phát các trang. Sử dụng config
cho phép bạn sửa đổi chúng trên cơ sở mỗi trang. Để phân phát một trang cụ thể làm
trang AMP, bạn cần xuất thuộc tính amp
trong đối tượng:
import React from 'react'
export const config = { amp: 'hybrid' };
const Home = () => (
<p>This is the home page</p>
);
export default Home;
Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình
.
Thêm
?amp=1
vào cuối URL. Trang này trông giống như cũ, nhưng nếu bạn nhìn trong Trên bảng điều khiển, bạn sẽ thấy phiên bản AMP của trang đang được hiển thị.
![Trang đang hoạt động và thông báo trong Bảng điều khiển công cụ của Chrome cho biết trang được hỗ trợ bởi AMP.](https://web.developers.google.cn/static/articles/how-to-use-amp-in-nextjs/image/the-live-page-a-message-da2dbcd870547.png?authuser=3&hl=vi)
Vì trang chỉ có một thẻ <p>
duy nhất nên không có sự khác biệt rõ ràng giữa
trang chính và phiên bản AMP của trang đó.
Cách phân phát thành phần AMP theo điều kiện
Các trang AMP cần phải có tập hợp các thành phần hợp lệ riêng thay cho nhiều phần tử HTML. Bây giờ
điều quan trọng là đảm bảo rằng các thành phần AMP chỉ được phân phối có điều kiện cho trang AMP.
Next.js cung cấp một hook có tên là useAmp
để cho phép bạn phân phát nhiều phần tử theo điều kiện
tuỳ thuộc vào phiên bản trang được yêu cầu.
Để xem nguồn, hãy nhấn vào Xem nguồn.
Chỉnh sửa
pages/index.js
để kết xuất một phần tử đoạn văn bản khác cho trang tuỳ thuộc vào việc phiên bản chính hoặc phiên bản AMP đã được yêu cầu: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;
Tải phiên bản chính của trang:
Thêm
?amp=1
vào cuối URL một lần nữa để tải phiên bản AMP của trang:Thử kết xuất nội dung thay thế cho thẻ hình ảnh của 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"
tự động hiển thị hình ảnh thích ứng hoàn toàn với tỷ lệ khung hình được chỉ định theo chiều rộng và chiều cao. Hãy tham khảo chủ đề Layout & truy vấn đa phương tiện để tìm hiểu thêm về bố cục được hỗ trợ của các phần tử AMP và amp-img để tìm hiểu thêm về tối ưu hoá.Xem lại phiên bản chính của trang.
Xem lại phiên bản AMP của trang.
Cách tạo trang chỉ AMP
Next.js cũng hỗ trợ các trang chỉ dành cho AMP. Với phương pháp này, một trang AMP duy nhất được phân phát và hiển thị cho người dùng và công cụ tìm kiếm mọi lúc.
Để hiển thị trang chỉ dành cho AMP, hãy thay đổi giá trị của thuộc tính
amp
trong đối tượng config thànhtrue
.import React from 'react' export const config = { amp: true }; const Home = () => ( <p>This is an AMP-only page</p> ); export default Home;