introduction
启用AMP">启用AMP
注意:
相关的
添加AMP 组件
AMP 验证
- 自定义验证器
跳过AMP 验证
在静态HTML 导出中的AMP
TS

introduction

通过Next.js 你能够调整任何一个React页面到一个AMP 页面,使用最小化配置并且不会脱离React …

你能够了解有关AMP 信息(在amp.dev 站点上) …

启用AMP

为了启用一个页面的AMP 支持,并且了解不同的AMP 配置,阅读next/amp的API 文档 …

注意:

仅仅在JS中的css是支持的(CSS-in-JS),CSS 模块目前不被AMP页面支持,你能够贡献CSS 模块化支持到 Next.js …

添加AMP 组件

AMP 社区提供了许多组件 many components 能够让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-timeage组件 ..

默认情况下最新版本的组件总是将会被导入,如果想自定义版本,使用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

AMP 验证

AMP 页面将自动的使用 amphtml-validator 在开发阶段进行校验,错误和警告将会出现在终端(当你启动了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并且基于这样改变导出行为 …

例如,hybrid AMP 页面page/about.js能够被输出

out/about.html使用客户端React运行时的HTML 页面
out/about.amp.htmlAMP 页面

并且如果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 页面

TS

AMP 当前对于TS 没有内置类型,但是它们正在努力 ..

作为一个解决方案你可以手动的创建一个叫做amp.d.ts文件在项目中并且增加这些自定义类型 …

AMP