Hướng dẫn cài đặt trang AMP trong Next.js, chèn custom CSS vào AMP page

1. Tăng Tốc Độ Tải Trang: Trang web sử dụng AMP được tối ưu hóa để tải nhanh hơn, giảm thời gian đợi cho người dùng. Điều này giúp cải thiện trải nghiệm người dùng và giảm tỷ lệ thoát trang (bounce rate).

2. SEO Tốt Hơn: Google đã công nhận rằng tốc độ tải trang là một yếu tố quan trọng trong thuật toán xếp hạng của họ. Cài đặt AMP có thể cải thiện vị trí của trang web của bạn trên kết quả tìm kiếm di động.

3. Tiêu Chuẩn Hóa Trải Nghiệm Người Dùng Di Động: AMP cung cấp một khuôn khổ chung để xây dựng trang web di động, giúp đảm bảo rằng trang của bạn sẽ hiển thị đẹp và tương thích trên nhiều thiết bị di động khác nhau.

4. Tiết Kiệm Dữ Liệu: Do trang AMP được tối ưu hóa và loại bỏ các yếu tố không cần thiết, nó có thể tiết kiệm băng thông dữ liệu cho người dùng khi trải nghiệm trang web của bạn.

5. Hỗ Trợ Analytics: AMP hỗ trợ các công cụ phân tích thống kê như Google Analytics, giúp bạn theo dõi và đánh giá hiệu suất trang web của mình.

6. Chia Sẻ Dễ Dàng: Trang AMP có thể được chia sẻ dễ dàng qua các nền tảng xã hội và thậm chí qua email, giúp tăng cơ hội tiếp cận và tương tác từ người dùng.

Tuy nhiên, việc tích hợp AMP vào Next.js cũng cần 1 vài mẹo nhỏ. Chứ nếu chỉ làm theo hướng dẫn của nhà phát hành, bạn chỉ có thể làm những trang đơn giản.

Sau đây tôi sẽ hướng dẫn bạn cách để chèn CSS của bạn vào AMP page mà không bị lỗi lặt vặt.

Bước 1: Cài các gói của Emotion.js

Ở đây tôi sẽ dùng pnpm, bạn có thể dùng yarn hoặc npm:

pnpm add @emotion/react @emotion/server @emotion/styled @emotion/css

Bước 2: Chèn custom CSS

Có 2 lỗi kinh điển của Next.js khi làm việc với AMP:

• The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'.: thẻ style bị bỏ ở trong body.
• The parent tag of tag 'style amp-custom' is 'div', but it can only be 'head': có hơn 1 thẻ style với thuộc tính amp-custom trong head.

Bạn chỉ cần chèn chính xác như sau thì sẽ không bị các lỗi đó:

import React from 'react';
import {useAmp} from "next/amp";

export const config = {amp: true};

function Amp1() {
  const isAmp = useAmp();

  return (
    <div>
      {isAmp && (
        <style jsx global>{`
          body {
            background-color: darkred;
          }
        `}</style>
      )}

      <p>This is an AMP page</p>
    </div>
  );
}

export default Amp1;

Lưu ý: với lỗi như sau thì khi bạn build ra môi trường production nó sẽ biến mất, nên không cần quan tâm nhé:

Tag 'html' marked with attribute 'data-ampdevmode'. Validator will suppress errors regarding any other tag with this attribute.

Plugin Chrome này có thể hỗ trợ việc dev nhanh hơn: https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?utm_source=ext_sidebar&hl=en-US

Tham khảo về custom CSS trong AMP page tại trang web chính thức của nhà phát hành: https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages