reactjs - 如何在 NextJS 中分离 amp-page 和 not amp-page？

Question

我知道在使用NextJS时，NextJS提供_document.js来制作全局头标签，但我不想使用_document.js。我有两个不同的页面，假设它是 Home 和 About 页面，我想将 About 页面设为 amp 页面，将 Home 设为普通 HTML 页面。我如何实现这一目标？

Answer 1

假设您有正确版本的 Nextjs，您应该能够使用 withAmp 高阶组件包装您的页面:

import { withAmp } from 'next/amp'

...

export default withAmp(Page)

如果您希望能够根据页面是否支持 Amp 有条件地渲染组件，则可以使用 hybrid 和 useAmp (假设您将组件编写为一个函数组件)。

import { withAmp, useAmp } from 'next/amp'


...

const Page = () => {
  const isAmp = useAmp()
  return (
    {isAmp ? <AmpComponent /> : <NonAmpComponent /> }
  )
}

...

export default withAmp(Page, { hybrid: true })

但是，根据我目前的经验，这会导致附加样式表的问题，该样式表通常对于 Amp 的限制来说太长。希望 Zeit 在未来的版本中解决这个问题。