Welcome to Batmantoto ⚡

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

Getting Started →

Learn more about Next

AMP Support in Next.js →

Learn how to build AMP sites with Next.js

Using Batmantoto Components

You can import AMP components using next/head. Checkout components/amp/AmpCustomElement for a simple way to import AMP Batmantoto 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:

  1. The [...] binding syntax [text]="myStateVariable"is not supported in JSX. Use data-amp-bind-text="myStateVariable" instead.
  2. Initializing amp-state via JSON string is not supported in JSX:
    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.