How to enable AMP?

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

page/index.js

export const config = { amp: true }

The amp configuration accepts the following values:

true: The page will be AMP-only

‘hybrid’: The page will have two versions, one with AMP and another with HTML

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

AMP FIRST PAGE

Take a look at the following example:

pages/about.js

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:

• The page has no Next.js or React client-side runtime
• The page is automatically optimized with AMP Optimizer
• , an optimizer that applies the same transformations as AMP caches (improves performance by up to 42%)
• The page has a user-accessible (optimized) version of the page and a search-engine indexable (unoptimized) version of the page

Hybrid AMP Page

Take a look at the following example:

pages/about.js

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 is rendered as traditional HTML (default) and AMP HTML (by adding ?amp=1 to the URL)
• The AMP version of the page only has valid optimizations applied with AMP Optimizer so that it is indexable by search-engines
• 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.