next/amp

Examples

AMP support is one of our advanced features, you can read more about AMP here.

To enable AMP, add the following config to your page:

export const config = { amp: true }

The amp config accepts the following values:

To learn more about the amp config, read the sections below.

AMP First Page

Take a look at the following example:

export const config = { amp: true }

function About(props) {
  return <h3>My AMP About Page!</h3>
}

export default About

The page above is an AMP-only page, which means:

Hybrid AMP Page

Take a look at the following example:

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

The page above is a hybrid AMP page, which means:

The page uses useAmp to differentiate between modes, it's a React Hook that returns true if the page is using AMP, and false otherwise.