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>My AMP About Page!</h3>
}
 
export default About

上面的页面是仅限 AMP 的页面，这意味着

页面没有 Next.js 或 React 客户端运行时
页面会自动使用AMP Optimizer进行优化，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>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 Optimizer 优化，以便搜索引擎可以对其进行索引

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