AMP (AMP)

範例

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

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

啟用 AMP

要啟用頁面的 AMP 支援，並進一步了解不同的 AMP 設定，請閱讀 next/amp 的 API 文件。

注意事項

目前僅支援 CSS-in-JS。AMP 頁面目前不支援 CSS 模組。您可以貢獻 CSS 模組支援給 Next.js。

新增 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靜態預渲染頁面時，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.d.ts` 的檔案，並新增這些自訂類型。

這有幫助嗎？