APM简介
使用Next.js，您可以在不离开React的情况下，以最少的配置将任何React页面变成AMP页面。
您可以在amp.dev官方网站上了解有关AMP的更多信息。
启用AMP
要为页面启用AMP支持，并了解有关不同AMP配置的更多信息，请阅读的API文档next/amp。
注意事项
- 仅支持CSS-in-JS。AMP页面目前不支持CSS模块。
添加AMP组件
AMP社区提供了许多组件，以使AMP页面更具交互性。Next.js将自动导入页面上使用的所有组件，并且无需手动导入AMP组件脚本：
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组件。
默认情况下，始终导入组件的最新版本。如果要自定义版本，可以使用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>Some time: {date.toJSON()}</p>
<amp-timeago
width="0"
height="15"
datetime={date.toJSON()}
layout="responsive"
>
.
</amp-timeago>
</div>
)
}
export default MyAmpPage</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验证
在开发过程中，将使用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
}
}静态HTML导出中的AMP
当用next export做静态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在项目内部手动创建一个名为的文件，并添加此处描述的自定义类型。
作者：terry，如若转载，请注明出处：https://www.web176.com/nextjs/2436.html
支付宝 
微信 