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

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

Houssein Djirdeh

Bạn sẽ học được gì?

Lớp học lập trình này cho phép bạn thử 2 cách mà bạn có thể sử dụng AMP trong ứng dụng Next.js. Hãy xem Cách AMP có thể đảm bảo hoạt động nhanh trong ứng dụng Next.js để tìm hiểu lý do bạn nê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 tạo một phiên bản AMP đi kèm của bất kỳ trang Next.js nào. Trước đây, 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 trang mà AMP không thể hỗ trợ. Phiên bản chính có trải nghiệm đầy đủ trong khi trang AMP có trải nghiệm hơi kém chất lượng. Khi giới thiệu amp-script, bạn không cần dùng đến phương pháp Kết hợp nữa, nhưng chúng ta sẽ đề cập đến vấn đề này tại đây phòng trường hợp bạn vẫn cầ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. Việc sử dụng đối tượng config cho phép bạn sửa đổi các đối tượng này trên mỗi trang. Để phân phát một trang cụ thể dưới dạng 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 Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.

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

3. Thêm ?amp=1 vào cuối URL. Trang này trông giống như vậy, nhưng nếu nhìn trong 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 các thành phần AMP theo điều kiện

Các trang AMP cần có một bộ thành phần hợp lệ riêng thay cho nhiều phần tử HTML. Điều quan trọng là bạn phải đảm bảo rằng các thành phần AMP chỉ được phân phát 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 có điều kiện các phần tử khác nhau 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 để trang này hiển thị một phần tử đoạn khác trên trang, tuỳ thuộc vào phiên bản chính hay 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 lại ?amp=1 vào cuối URL để tải phiên bản AMP của trang:

   

5. Hãy thử hiển thị trang AMP thay thế thẻ hình ảnh 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 đầy đủ với tỷ lệ khung hình được chỉ định theo chiều rộng và chiều cao. Hãy xem bài viết Truy vấn bố cục và nội dung nghe nhìn để tìm hiểu thêm về các bố cục được hỗ trợ của các phần tử AMP và tìm hiểu thêm về amp-img để tìm hiểu thêm về khả năng tối ưu hoá của phần tử đó.

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ỉ dành cho 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 sẽ luôn được phân phát và hiển thị cho người dùng và công cụ tìm kiếm.

1. Để hiển thị một trang chỉ dành cho AMP, hãy thay đổi giá trị của thuộc tính amp trong đối tượng cấu hình 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;