Welcome to AMP ⚡

To get started, edit pages/index.js and save to reload.

AMP Support in Next.js →

Learn how to build AMP sites with Next.js

Using AMP Components

You can import AMP components using next/head. Checkout components/amp/AmpCustomElement for a simple way to import AMP components. Once the component is imported, you can use it like any other HTML element.

amp-bind & amp-state

It's no problem to use amp-bind and amp-state with Next.js. There are two things to be aware of:

The [...] binding syntax [text]="myStateVariable"is not supported in JSX. Use data-amp-bind-text="myStateVariable" instead.
Initializing amp-state via JSON string is not supported in JSX:
```
<amp-state id="myState">
  <script type="application/json">
    {
      "foo": "bar"
    }
  </script>
</amp-state>
```
Instead you need to use dangerouslySetInnerHTML to initialize the string. can use the /components/amp/AmpState.js component to see how it works. The same approach works for amp-access and amp-consent as well

Demo:

amp-list & amp-mustache

Mustache templates conflict with JSX and it's template literals need to be escaped. A simple approach is to escape them via back ticks: src={`{{imageUrl}}`}.

amp-script

Checkout the amp-script helper here: components/amp/AmpScript.js for embedding custom JavaScript.

The helper also supports embedding inline scripts. Good to know: Next.js uses AMP Optimizer under the hood, which automatically adds the needed script hashes for inline amp-scripts.