useAmp

範例

AMP 支援是我們的高級功能之一，您可以在此閱讀更多關於 AMP 的資訊。

要啟用 AMP，請在您的頁面中加入以下配置：

pages/index.js

export const config = { amp: true }

amp 配置接受以下值：

true - 該頁面將僅為 AMP 版本
'hybrid' - 該頁面將有兩個版本，一個是 AMP 版本，另一個是 HTML 版本

要了解更多關於 amp 配置的資訊，請閱讀以下章節。

AMP 專用頁面

請看以下範例：

pages/about.js

export const config = { amp: true }

function About(props) {
  return <h3>我的 AMP 關於頁面！</h3>
}

export default About

上述頁面是一個僅限 AMP 的頁面，這意味著：

該頁面沒有 Next.js 或 React 的客戶端運行時
該頁面會自動透過 AMP Optimizer 進行優化，這個優化工具會應用與 AMP 快取相同的轉換（可將效能提升高達 42%）
該頁面有一個使用者可訪問的（優化後）版本和一個搜索引擎可索引的（未優化）版本

混合 AMP 頁面

請看以下範例：

pages/about.js

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

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

  return (
    <div>
      <h3>我的 AMP 關於頁面！</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="a cool image"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
      )}
    </div>
  )
}

export default About

上述頁面是一個混合 AMP 頁面，這意味著：

該頁面會渲染為傳統 HTML（預設）和 AMP HTML（透過在 URL 中加入 ?amp=1）
該頁面的 AMP 版本僅會應用 AMP Optimizer 的有效優化，以便被搜索引擎索引

該頁面使用 useAmp 來區分模式，這是一個 React Hook，如果頁面使用 AMP 則返回 true，否則返回 false。

AMP 專用頁面

混合 AMP 頁面

On this page