跳到主要內容
建置你的應用程式設定AMP

AMP

範例

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

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

啟用 AMP

要為頁面啟用 AMP 支援，並了解更多關於不同 AMP 設定的資訊，請閱讀 next/amp 的 API 文件。

注意事項

新增 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 匯出 期間進行驗證，任何警告/錯誤將會列印到終端機。任何 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 匯出 靜態預先渲染頁面時，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 的文件，並在你的專案中新增這些 自訂類型。