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:

  1. export const config = { 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:

  1. export const config = { amp: true }
  2. function About(props) {
  3. return <h3>My AMP About Page!</h3>
  4. }
  5. 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:

  1. import { useAmp } from 'next/amp'
  2. export const config = { amp: 'hybrid' }
  3. function About(props) {
  4. const isAmp = useAmp()
  5. return (
  6. <div>
  7. <h3>My AMP About Page!</h3>
  8. {isAmp ? (
  9. <amp-img
  10. width="300"
  11. height="300"
  12. src="/my-img.jpg"
  13. alt="a cool image"
  14. layout="responsive"
  15. />
  16. ) : (
  17. <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
  18. )}
  19. </div>
  20. )
  21. }
  22. 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.