了解在 Next.js 应用中支持 AMP 的好处和利弊
AMP 是一种网页组件框架，可确保网页快速加载。Next.js 本身就支持 AMP。
您将学到什么？
本指南首先简要介绍了 AMP 如何保证网页快速加载，然后介绍了在 Next.js 应用中支持 AMP 的不同方式，然后可帮助您确定哪种方法最适合您。
本指南的目标受众是已决定使用 Next.js 但不确定是否支持 AMP 的 Web 开发者。
AMP 如何保证网页能够快速加载
AMP 有两项主要策略来保证速度：
- AMP HTML：一种受限的 HTML 形式，可使某些优化成为强制性优化，并禁止采用会导致运行缓慢的架构模式。如需简要了解优化和限制，请参阅 AMP 的工作原理。
- AMP 缓存：某些搜索引擎（例如 Google 和 Bing）使用的内容缓存，可通过预呈现加快网页加载速度。请参阅 AMP 缓存存在的原因，详细了解这些缓存的优势和利弊；参阅如何缓存我的 AMP 网页？，了解 AMP 网页如何进入缓存。
如何在 Next.js 中使用 AMP
在 Next.js 中使用 AMP 的方式有两种：
- 通过混合 AMP 方法，您可以为任何 Next.js 网页创建相应的 AMP 版本。
- 通过仅限 AMP 方法，您可以将 AMP 设为网页的唯一选择。
虽然 Next.js 通常被视为 React 框架，但请务必注意，当您使用 Next.js 提供 AMP 网页时，您无法再在客户端运行 React 组件，因为 React 组件不是有效的 AMP 组件。换句话说，Next.js 不再是 React 框架，而是用于生成 AMP 网页的服务器端模板引擎。
如何决定是使用混合 AMP 版本还是纯 AMP 版本
如果您对加载性能很重视，那么纯 AMP 网页可能会是确保网页能够快速加载并保持快速的好方法。但要点如下：为保证速度，AMP 禁止使用某些通常会导致网页运行缓慢的架构模式和 HTML 元素。例如，AMP 不允许使用自定义同步 JavaScript，因为阻碍呈现的资源是导致网页加载速度缓慢的常见原因。
为了解仅限 AMP 的方法是否适合您，您需要确定是否所有前端代码都可以用 AMP HTML 表示：
- 请参阅 AMP 的工作原理，了解 AMP 的高层级架构限制和强制性优化。
- 请阅读 HTML 标记以了解 AMP 允许和禁止的 HTML 标记，浏览 AMP 组件目录以查看 AMP 社区为解决常见用例而构建的自定义组件，并参阅 amp-script 了解如何使用自定义 JavaScript 实现 AMP 目前不支持的功能。
即使仅限 AMP 的方法不适用于您的网页，我们仍建议您尽可能使用 AMP，因为 AMP HTML 和 AMP 缓存可以保证速度。Next.js 中的混合 AMP 方法提供了一种有条件地提供 AMP 网页的方法。但是，这也会产生更高的维护费用，因为您需要为每个页面维护两个版本。
总结
AMP 通过强制实施可实现速度的模式并禁止会导致速度变慢的模式，保证您的网站可以快速加载并保持高速运行。AMP HTML 和 AMP 缓存是 AMP 保证速度的两种主要方式。但在采用 AMP 之前，您应该确保 AMP 可以支持您网站的所有要求。