useAmp

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:

exportconstconfig= { amp:true }

The amp config accepts the following values:

• true - The page will be AMP-only
• 'hybrid' - The page will have two versions, one with AMP and another one with HTML

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

AMP First Page

Take a look at the following example:

exportconstconfig= { amp:true }functionAbout(props) {return <h3>My AMP About Page!</h3>}exportdefault 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:

import { useAmp } from'next/amp'exportconstconfig= { amp:'hybrid' }functionAbout(props) {constisAmp=useAmp()return ( <div> <h3>My AMP About Page!</h3> {isAmp ? ( <amp-imgwidth="300"height="300"src="/my-img.jpg"alt="a cool image"layout="responsive" /> ) : ( <imgwidth="300"height="300"src="/my-img.jpg"alt="a cool image" /> )} </div> )}exportdefault 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.