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
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