hybrid amp page with nextjs

Did you know that Next.js has support for AMP pages? You can even run and hybrid AMP page. The snippet shows a page rendered as traditional HTML (default) and AMP HTML (by adding ?amp=1 to the URL) #javascript #webdevelopment

Snippet
Image

Copy Snippet

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