在Next.js网页上添加AMP组件加速移动页面，或AMP，是一个开源的网络组件框架，可以提高网页的加载速度。AMP对网

加速移动页面，或AMP，是一个开源的网络组件框架，可以提高网页的加载速度。AMP对网页的HTML、CSS和JavaScript规定了严格的准则，控制媒体、广告和其他脚本等外部资源的加载方式。

在本教程中，我们将浏览AMP的一些准则，学习如何管理出现的一些权衡因素。我们将介绍如何通过在Next.js项目中使用AMP组件，在网页上显示耗费资源的元素，同时仍然遵守AMP的规则。

如果你想跟着学习，本教程的所有代码都可以在我的GitHub上找到。让我们开始吧!

AMP的局限性

AMP通过阻止开发者使用包含图片、视频和音频等资源的自定义元素来优化网页加载。同样，开发者也不能为显示动态广告、嵌入社交媒体帖子和创建交互式表单等任务编写自定义JavaScript。为了解决这些限制，我们将使用AMP组件。

AMP组件

AMP组件是自定义编写的HTML片段，我们可以用它来为我们的网页添加复杂的功能，同时仍然符合AMP的标准。

目前，AMP组件目录包括许多常见任务的内置组件，如添加图片、计算网页分析和显示广告。因为内置组件包含在AMP的基础库中，所以你不需要在你的代码中明确包含它们。

扩展组件是对基础库的扩展，因此默认不包括。在你的代码中，你需要把扩展组件作为自定义元素明确地包含进去。例如，你可能希望用amp-analytics 添加页面分析，或用amp-lightbox 添加一个灯箱。

该目录还包括实验性组件，这些组件已经发布，但还不支持广泛使用。如果你在组件目录中找不到你需要的东西，你可能希望编写你自己的AMP组件!

现在我们知道了有哪些AMP组件可用，让我们在网页上添加一个吧!

将一个网页变成AMP页面

在给我们的网页添加AMP组件之前，我们需要把我们的网页配置成一个AMP页面。amp 配置接受两种类型的值：true 和hybrid 。输入一个值true ，就可以把网页变成一个AMP的HTML页面。输入一个值hybrid ，就可以创建两个版本的网页，一个是AMP HTML，一个是标准HTML，标准HTML是默认的。

让我们用true 将我们的网页配置为AMP页面。

export const config = { amp: true }

现在，让我们通过运行下面的代码块来创建一个真正的AMP页面。

export default function Page = () => {
  return <h1>My First AMP Page</h1>
}

当我们导出真正的AMP页面时，Next.js将创建两个版本的页面，一个是为你的用户提供的优化版本，一个是为搜索引擎提供的非优化版本。

要创建一个混合AMP页面，你所要做的就是把页面的配置值改为hybrid 。

export const config = { amp: 'hybrid' }
export default function Page = () => {
  return <h1>My First AMP Page</h1>
}

要访问AMP页面，你需要在URL的末尾添加?amp=1 。此外，由于hybrid 不像true 那样是一个布尔值，你需要用引号将其包围。

混合AMP页面要求你为AMP和标准HTML页面编写有效的HTML。为了渲染正确的HTML，我们可以使用useAmp React Hook。

`useAmp` React Hook

通过导入下面的包，将useAmp React Hook添加到你的网页上。

import { useAmp } from 'next/amp'

接下来，创建一个变量，保存React Hook的输出。

const isAmp = useAmp()

现在，你可以使用三元运算符或if 语句来渲染正确的HTML。

{isAmp ? (
    // AMP component
    ) : (
    // Standard HTML
    )
}

最后，我们要把所有的东西放在一起!在下面的例子中，我们将使用amp-img ，一个加载图像的AMP组件，在我们的网页上显示一个图像。

import { useAmp } from "next/amp";
import Image from "next/image";

export const config = { amp: "hybrid" };

export default function Hybrid() {
  const isAmp = useAmp();

  return (
    <div>
      <h1>Hybrid AMP Page&lt;/h1>
      {isAmp ? (
        <amp-img
          alt="A view of the sea"
          src="/chiangmai.jpeg"
          width="640"
          height="360"
        ></amp-img>
      ) : (
        <Image
          alt="A view of the sea"
          src="/chiangmai.jpeg"
          width="640"
          height="360"
        />
      )}
    </div>
  );
}

在上面例子中的AMP版本中，我们不需要使用默认的HTML<img> 标签。此外，由于amp-img 是作为一个内置的组件，我们不需要把它导入到我们的网页上如果AMP组件库中的某个组件没有被包含在基础库中，我们会收到以下通知，即它需要一个外部脚本。

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>

在Next.js中，你需要在文档的头部包含这个script 标签，如下面的代码块所示。

<Head>
    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
    ></script>
</Head>

AMP验证

在我们导出AMP页面之前，让我们确保它符合AMP的要求。添加验证的方法有很多，例如，npm包、命令行工具、浏览器扩展程序和开发人员控制台！这些方法都是为了满足AMP要求。让我们来看看Next.js中AMP验证的内置方法。 amphtml-validator.

在构建和导出过程中，amphtml-validator 要求AMP页面符合AMP规范。任何警告或错误都将显示在终端。

例如，假设你试图使用一个普通的HTML<img> 标签，而不是amp-img 。这将导致导出时出现错误，如下面的代码所示。

Amp Validation

/hybrid?amp=1  error  The parent tag of tag 'img' is 'div', but it can only be 'i-amphtml-sizer-intrinsic'.
               error  The parent tag of tag 'img' is 'div', but it can only be 'i-amphtml-sizer-intrinsic'.


> Build error occurred
Error: AMP Validation caused the export to fail. https://nextjs.org/docs/messages/amp-export-validation

如果你想使用一个自定义的AMP验证器，你可以在next.config.js 文件中加入你的自定义验证规则的路径。

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

在Next.js中导出AMP页面

如果没有验证错误，运行next export ，将把我们所有的页面导出为静态HTML页面。Next.js会自动检测一个页面是否支持AMP，并以正确的格式导出该页面。

如前所述，一个混合AMP页面将被导出为两个文件。例如，假设我们有一个名为pages/blog.js 的混合页面。它将被导出为out/blog.html ，一个带有客户端React运行时间的标准HTML页面，以及out/blog.amp.html ，一个AMP HTML页面。

Next.js会自动插入一个从AMP页面到标准HTML页面的链接，反之亦然，分别见于以下两个代码片断。

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


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

如果pages/blog.js 是一个真正的AMP页面，它将导出一个名为out/blog.html 的HTML文件。

结论

现在，你知道如何在Next.js中开始使用AMP组件了吧

在本教程中，我们介绍了内置的、可扩展的和实验性的AMP组件，真正的和混合的AMP页面，以及useAmp React Hook。然后，我们学习了如何在Next.js中验证和导出AMP页面。

在撰写本文时，AMP只支持CSS-in-JS的样式设计。然而，对CSS模块的支持正在开发中，你可以在GitHub上找到一些变通方法。

同样地，官方也没有对TypeScript的支持。虽然它在路线图上，但目前还没有预定的发布日期。作为一种变通方法，你可以在你的项目中创建一个自定义类型的文件，名为 [amp.d.ts](https://stackoverflow.com/questions/50585952/typescript-and-google-amp-property-amp-img-does-not-exist-on-type-jsx-intrin/50601125#50601125)的文件，并为AMP添加自定义类型。

我希望你喜欢这个教程!如果你发现自己被卡住了，请留下评论，我会尽力帮助你的。

The postAdding AMP components to a Next.js webpageappeared first onLogRocket Blog.

在Next.js网页上添加AMP组件