Cách sử dụng AMP trong Next.js

Hãy thử hai cách mà bạn có thể thêm AMP vào ứng dụng Next.js

Houssein Djirdeh

Để theo dõi lớp học lập trình này, hãy mở nhiễu hỗ trợ này trong thẻ thứ hai.

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

Thận trọng: Bạn nên sử dụng phương pháp chỉ dành cho AMP để sử dụng AMP với Next.js. Phương pháp AMP kết hợp được mô tả trong phần này có chi phí bảo trì cao hơn so với phương pháp chỉ sử dụng AMP vì cần bạn duy trì hai phiên bản của mỗi trang. Bạn chỉ nên sử dụng phương pháp Kết hợp nếu chắc chắn rằng phương pháp chỉ dành cho AMP sẽ không hiệu quả.

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;

1. Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.

2. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình .

3. 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ị.

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.

1. Để xem nguồn, hãy nhấn vào Xem nguồn.

2. 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;
   

3. Tải phiên bản chính của trang:

   

4. 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:

   

5. 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á.

6. Xem lại phiên bản chính của trang.

   

7. 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.

1. Để 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ành true.

   import React from 'react'
   
   export const config = { amp: true };
   
   const Home = () => (
     <p>This is an AMP-only page</p>
   );
   
   export default Home;