AMP

範例

使用 Next.js 只需最少配置，無需脫離 React 即可將任何 React 頁面轉換為 AMP 頁面。

您可以在官方 amp.dev 網站閱讀更多關於 AMP 的資訊。

啟用 AMP

要為頁面啟用 AMP 支援並了解不同的 AMP 配置，請閱讀 next/amp API 文件。

注意事項

目前僅支援 CSS-in-JS。AMP 頁面暫時不支援 CSS 模組 (CSS Modules)。您可以為 Next.js 貢獻 CSS 模組支援。

添加 AMP 元件

AMP 社群提供眾多元件來增強 AMP 頁面的互動性。Next.js 會自動導入頁面中使用的所有元件，無需手動導入 AMP 元件腳本：

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

上例使用了 amp-timeago 元件。

預設情況下，總是會導入元件的最新版本。若要自訂版本，可以使用 next/head，如下例所示：

import Head from 'next/head'

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <Head>
        <script
          async
          key="amp-timeago"
          custom-element="amp-timeago"
          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
        />
      </Head>

      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

AMP 驗證

開發期間，AMP 頁面會自動透過 amphtml-validator 進行驗證。錯誤與警告會顯示在啟動 Next.js 的終端機中。

在靜態 HTML 導出 (Static HTML export) 時也會驗證頁面，任何警告/錯誤將輸出至終端機。若有 AMP 錯誤會導致導出程序以狀態碼 1 結束，因為導出的內容不符合 AMP 規範。

自訂驗證器

您可以在 next.config.js 中設定自訂 AMP 驗證器，如下所示：

module.exports = {
  amp: {
    validator: './custom_validator.js',
  },
}

跳過 AMP 驗證

要關閉 AMP 驗證，請在 next.config.js 中加入以下程式碼：

experimental: {
  amp: {
    skipValidation: true
  }
}

靜態 HTML 導出中的 AMP

使用靜態 HTML 導出 (Static HTML export) 靜態預渲染頁面時，Next.js 會檢測頁面是否支援 AMP 並據此調整導出行為。

例如，混合 AMP 頁面 pages/about.js 會輸出：

out/about.html - 包含客戶端 React 運行時的 HTML 頁面
out/about.amp.html - AMP 頁面

若 pages/about.js 是純 AMP 頁面，則會輸出：

out/about.html - 優化後的 AMP 頁面

Next.js 會自動在 HTML 版本頁面中插入 AMP 版本的連結，您無需手動添加，如下所示：

<link rel="amphtml" href="/about.amp.html" />

而 AMP 版本頁面會包含 HTML 頁面的連結：

<link rel="canonical" href="/about" />

當啟用 trailingSlash 時，pages/about.js 導出的頁面會是：

out/about/index.html - HTML 頁面
out/about.amp/index.html - AMP 頁面

TypeScript

AMP 目前尚未內建 TypeScript 類型定義，但已在規劃中 (#13791)。

作為解決方案，您可以在專案中手動建立 amp.d.ts 檔案並加入這些自訂類型。

On this page