Skip to main content

AMP

Examples

使用 Next.js，你可以将任何 React 页面转换为 AMP 页面，只需最少的配置，并且无需离开 React。

¥With Next.js you can turn any React page into an AMP page, with minimal config, and without leaving React.

你可以在 amp.dev 官方网站上阅读有关 AMP 的更多信息。

¥You can read more about AMP in the official amp.dev site.

启用 AMP​

¥Enabling AMP

要为页面启用 AMP 支持并了解有关不同 AMP 配置的更多信息，请阅读 next/amp 的 API 文档。

¥To enable AMP support for a page, and to learn more about the different AMP configs, read the API documentation for next/amp.

注意事项​

¥Caveats

添加 AMP 组件​

¥Adding AMP Components

AMP 社区提供了 许多组件 来使 AMP 页面更具交互性。Next.js 会自动导入页面上使用的所有组件，无需手动导入 AMP 组件脚本：

¥The AMP community provides many components to make AMP pages more interactive. Next.js will automatically import all components used on a page and there is no need to manually import AMP component scripts:

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 组件。

¥The above example uses the amp-timeago component.

默认情况下，始终导入组件的最新版本。如果要自定义版本，可以使用 next/head，如下例：

¥By default, the latest version of a component is always imported. If you want to customize the version, you can use next/head, as in the following example:

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 Validation

AMP 页面在开发过程中会自动使用 amphtml-validator 进行验证。错误和警告将出现在你启动 Next.js 的终端中。

¥AMP pages are automatically validated with amphtml-validator during development. Errors and warnings will appear in the terminal where you started Next.js.

页面也会在 静态 HTML 导出 期间进行验证，任何警告/错误都将打印到终端。任何 AMP 错误都将导致导出退出并显示状态代码 1，因为导出不是有效的 AMP。

¥Pages are also validated during Static HTML export and any warnings / errors will be printed to the terminal. Any AMP errors will cause the export to exit with status code 1 because the export is not valid AMP.

自定义验证器​

¥Custom Validators

你可以在 next.config.js 中设置自定义 AMP 验证器，如下所示：

¥You can set up custom AMP validator in next.config.js as shown below:

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

跳过 AMP 验证​

¥Skip AMP Validation

要关闭 AMP 验证，请将以下代码添加到 next.config.js

¥To turn off AMP validation add the following code to next.config.js

experimental: {
  amp: {
    skipValidation: true
  }
}

静态 HTML 导出中的 AMP​

¥AMP in Static HTML Export

当使用 静态 HTML 导出 静态预渲染页面时，Next.js 将检测页面是否支持 AMP 并据此更改导出行为。

¥When using Static HTML export statically prerender pages, Next.js will detect if the page supports AMP and change the exporting behavior based on that.

例如，混合 AMP 页面 pages/about.js 将输出：

¥For example, the hybrid AMP page pages/about.js would output:

  • out/about.html - 带有客户端 React 运行时的 HTML 页面

    ¥out/about.html - HTML page with client-side React runtime

  • out/about.amp.html - AMP 页面

    ¥out/about.amp.html - AMP page

如果 pages/about.js 是仅 AMP 页面，那么它将输出：

¥And if pages/about.js is an AMP-only page, then it would output:

  • out/about.html - 优化的 AMP 页面

    ¥out/about.html - Optimized AMP page

Next.js 会自动在 HTML 版本中插入指向你页面的 AMP 版本的链接，因此你不必这样做，如下所示：

¥Next.js will automatically insert a link to the AMP version of your page in the HTML version, so you don't have to, like so:

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

你的页面的 AMP 版本将包含指向 HTML 页面的链接：

¥And the AMP version of your page will include a link to the HTML page:

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

当启用 trailingSlash 时，pages/about.js 的导出页面将为：

¥When trailingSlash is enabled the exported pages for pages/about.js would be:

  • out/about/index.html - HTML 页面

    ¥out/about/index.html - HTML page

  • out/about.amp/index.html - AMP 页面

    ¥out/about.amp/index.html - AMP page

TypeScript​

AMP 目前没有 TypeScript 的内置类型，但它在他们的路由图中 (#13791)。

¥AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap (#13791).

作为解决方法，你可以在项目中手动创建一个名为 amp.d.ts 的文件，然后添加这些 自定义类型.txt 文件。

¥As a workaround you can manually create a file called amp.d.ts inside your project and add these custom types.