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="一张酷图"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="一张酷图" />
      )}
    </div>
  )
}
 
export default About

上面的页面是一个混合 AMP 页面，这意味着：

页面默认渲染为传统 HTML，并且可以通过在 URL 中添加 ?amp=1 来渲染 AMP HTML
AMP 版本的页面只应用了 AMP Optimizer 的有效优化，以便搜索引擎可以索引

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