useAmp

示例

AMP 支持是我们的高级功能之一，您可以在此处阅读更多关于 AMP 的内容。

要启用 AMP，请向您的页面添加以下配置：

pages/index.js

export const config = { amp: true }

amp 配置接受以下值：

true - 页面将仅作为 AMP 页面
'hybrid' - 页面将有两个版本，一个带有 AMP，另一个带有 HTML

要了解更多关于 amp 配置的信息，请阅读以下部分。

AMP 专属页面

请看以下示例：

pages/about.js

export const config = { amp: true }

function About(props) {
  return <h3>我的 AMP 关于页面！</h3>
}

export default About

上面的页面是一个 AMP 专属页面，这意味着：

该页面没有 Next.js 或 React 的客户端运行时
该页面通过 AMP Optimizer 自动优化，这个优化器应用了与 AMP 缓存相同的转换（性能提升高达 42%）
该页面有一个用户可访问（优化后）的版本和一个搜索引擎可索引（未优化）的版本

混合 AMP 页面

请看以下示例：

pages/about.js

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

function About(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>我的 AMP 关于页面！</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，并通过在 URL 中添加 ?amp=1 提供 AMP HTML 版本
页面的 AMP 版本仅应用了 AMP Optimizer 的有效优化，以便被搜索引擎索引

该页面使用 useAmp 来区分模式，这是一个 React Hook，如果页面使用 AMP 则返回 true，否则返回 false。

AMP 专属页面

混合 AMP 页面

On this page