Next.js 现在支持 AMP。他们提供了多种方法（仅 AMP 和 AMP 混合）来解决这个问题。由于您可以在页面级别启用 AMP，因此您可以慢慢迁移到完整的 AMP 网站。

例子

// pages/about.js
export const config = { amp: true }

export default function AboutPage(props) {
  return <h3>My AMP About Page!</h3>
}

这样你就可以同时支持两者。React 客户端渲染和纯 AMP。

文档 Next.js AMP

我们有类似的架构。

陷阱：

1. 我们不想创建一个新的技术堆栈来为 Amp 页面提供服务。

2. 核心和 AMP 堆栈必须在功能方面保持同步。

我们通过执行以下操作解决了它：

1. 编写一个新的 server.js 文件并添加一个新的节点作业。
2. 组件以某种方式组织，其中视图不是连接的组件。
3. 开发 HOC 并在您的 React 模板包含 AMP 不支持的内容的情况下选择模板 AMP vs React。

AMP 页面纯粹是在服务器端呈现的。因此，server.js 使用我们在 render 方法中提到的根组件生成一个新文件 (index.html)。

它在内部消耗必要的组件，随着我们的进行，React 组件生成的 CSS 和 HTML 的数量存在问题。

我们以此为契机清理 CSS 并仅在需要时编写单独的 AMP。

所以 AMP 代表 Accelerated Mobile Pages，而不是 Accelerated Mobile Apps。将动态 App 1:1 导入 AMP 将是困难的。因此，根据 AMP 标记标准，您需要静态 HTML 标记，并且这些页面（应用中的页面 <=> 不同屏幕）之间的转换将是普通的旧 HTML 链接。也许您能够以负担得起的努力从您的应用程序中使用自定义模板生成此类标记。也许ampreact可以帮助你。

我考虑过ampreact。但是将 react 用于 AMP 会增加额外的复杂性。最后决定用node+ejs+express。AMP 还提供用于处理动态内容的组件，例如 amp-list、amp-bind、amp-live-list 等

https://www.ampproject.org/docs/reference/components#dynamic-content