如何在 Next.js 中创建 AMP 页面

示例

通过 Next.js，您可以用极简配置将任何 React 页面转化为 AMP 页面，全程无需脱离 React 开发环境。

您可以在官方 amp.dev 站点了解更多关于 AMP 的信息。

启用 AMP 功能

要为页面启用 AMP 支持并了解不同的 AMP 配置选项，请阅读 next/amp 的 API 文档。

注意事项

目前仅支持 CSS-in-JS 方案。AMP 页面暂不支持 CSS Modules。您可以为 Next.js 贡献 CSS Modules 支持。

添加 AMP 组件

AMP 社区提供了丰富的组件来增强 AMP 页面的交互性。Next.js 会自动导入页面使用的所有组件，无需手动引入 AMP 组件脚本：

export const config = { amp: true }

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

  return (
    <div>
      <p>当前时间: {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>当前时间: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

AMP 验证

开发过程中，Next.js 会使用 amphtml-validator 自动验证 AMP 页面。错误和警告信息将显示在启动 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
  }
}

静态导出中的 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 文件并添加这些自定义类型作为临时解决方案。

如何在 Next.js 中创建 AMP 页面

On this page