在Next.Js中使用AMP 加速行動版載入速度

什麼是加速版流動網頁(AMP)?

AMP代表「加速版流動網頁」。它是一個開源Web組件框架(Web Components)，由Google和其他幾家技術和出版公司聯合發起。使用 AMP，可以創建幾乎可以立即加載的簡單移動網站。 AMP 的特點是減少了 JavaScript 和 CSS 元素，並使用了內容傳遞網路(CDN - Content Delivery Network)。

AMP 採用一種簡化形式的 HTML 來加速和改進移動頁面的功能，限制了 HTML/CSS 和 JavaScript。某些與標準網頁代碼兼容的標籤不能與 AMP 一起使用。 為了加快 Google 搜索的加載速度，大多數 AMP 頁面由 Google 緩存。

Google聲稱，搜索中提供的 AMP 頁面通常會在不到一秒的時間內加載，並使用常規頁面十分之一的數據。

如何在Next.js中使用AMP?

在我們可以將 AMP 組件添加到我們的網頁之前，我們需要將我們的頁面配置為 AMP 頁面。如果為true，則意味著您的頁面將是純AMP版本，如果為"hybrid" (AMP混合版本)，則該頁面將同時具有 AMP 版本和 HTML 版本。

純AMP網頁版本 (amp: true)

要啟用純AMP網頁版本，將const config = { amp: true }添加到您的頁面例如page.tsx 或 page.jsx：

export const config = { amp: true }

function Page(props) {
  return <h3>我的第一個AMP頁面!</h3>
}

export default Page

純AMP頁面版本不會在客戶端運行任何 Next.js 或 React 代碼。該版本使用 AMP Optimizer 自動優化，將性能提高多達 42%，用戶可以很快地載入頁面。以及具有用戶可訪問（優化）版本的頁面和搜索引擎可索引（未優化）版本的頁面。

AMP混合版本 (amp: “hybrid”)

在AMP混合版本，你的頁面將同時具有 AMP 版本和 HTML 版本（通過將 ?amp=1 添加到 URL）。要使用混合版本，首先我們載入useAmp hook 套件以及將const config = { amp: 'hybrid' }添加到您的頁面例如page.tsx 或 page.jsx：

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

之後我們可以使用useAmp() hook，這個可以幫助我們檢查頁面是否amp模式，若果是amp我們可以有條件地渲染對應的component元件:

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

function Page(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>我的第一個AMP頁面!</h3>
      {/* 有條件地渲染對應的component元件 */}
      {isAmp ? ( // 如果是AMP頁面
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="an amp image"
          layout="responsive"
        />
      ) : ( // 如果是非AMP頁面
        <img width="300" height="300" src="/my-img.jpg" alt="an normal image" />
      )}
    </div>
  )
}

export default Page