How to separate amp-page and not amp-page in NextJS?

user_8641944 0
Viewed 617

I know when using NextJS, NextJS provide _document.js to make global head tag but I want not to use _document.js. I have two different pages, let's say it's Home and About page, I want to make the About page to be an amp-page and the Home as a normal HTML page. How do I achieve this?

amp-html next.js reactjs
1 Answers

Assuming you have the correct version of Nextjs, you should be able to wrap your page with the withAmp higher order component:

import { withAmp } from 'next/amp'

...

export default withAmp(Page)

If you want the ability to conditionally render components based on whether the page can support Amp or not, you can use hybrid and useAmp (assuming you write your component as a Function Component).

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


...

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

...

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

However, in my current experience this leads to issues regarding attaching a stylesheet that is often too long for Amp's restrictions. Hopefully, Zeit addresses this in a future release.

user_22934940
Related