introduction

AMP支持是Next.js 高级特性之一,你能够在

中了解更多 ..

为了启用AMP,增加以下配置到页面中

export const config = { amp: true }

amp配置接收以下的值:

true 页面将仅AMP
hybrid页面将具有两个版本,一个是AMP另一个是 HTML …

为了了解amp配置,读取下面的部分信息 …

AMP 第一个页面

查看以下的示例

export const config = { amp: true }
function About(props) {
  return <h3>My AMP About Page!</h3>
}
export default About

这个页面仅仅是AMP-only 页面,这意味着:

这个页面没有Next.js 或者 React 客户端运行时
这个页面自动的通过AMP Optimizer进行优化,应用与 AMP 缓存相同的转换的优化器（将性能提高多达 42%）
页面包含了一个页面的用户可访问(优化)的版本并且包含了搜索引擎可索引化的(未优化的)的页面版本 ..

Hybrid AMP Page

import { useAmp } from 'next/amp'
export const config = { amp: 'hybrid' }
function About(props) {
  const isAmp = useAmp()
  return (
    <div>
      <h3>My AMP About Page!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="a cool image"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
      )}
    </div>
  )
}
export default About

这个页面是一个混合的AMP 页面,这意味着:

页面将渲染为传统的HTML (默认)以及 AMP HTML (通过增加?amp=1到URL)
这个页面的AMP 版本仅仅通过AMP 优化器进行有效优化(因此它能够被搜索引擎索引)

页面使用useAmp去区分不同的模式,React Hook将返回true如果页面使用AMP,否则false …

React 框架学习

Next-Amp

introduction

AMP 第一个页面

Hybrid AMP Page