如何在 Next.js 中建立 AMP 頁面

範例

使用 Next.js 您可以將任何 React 頁面轉換為 AMP 頁面，只需最少設定且無需離開 React。

您可以在官方 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 的檔案，並加入這些自訂類型。

如何在 Next.js 中建立 AMP 頁面

On this page