* Migrate to AMP Optimizer 2.0

Most notable changes:

* Automatically import all missing AMP component scripts.
* Automatically add any missing mandatary AMP tags.
* 40% faster

I've updated the docs to mention component auto import and added a corresponding
test case.

* change validator tests which now pass validation

* Improve wording

Co-Authored-By: JJ Kasper <jj@jjsweb.site>

* Update adding-amp-components.md

Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Joe Haddad <timer150@gmail.com>

2020-02-14 16:01:43 -05:00

1.6 KiB

Raw Blame History

description
Add components from the AMP community to AMP pages, and make your pages more interactive.

Adding AMP Components

The AMP community provides many components to make AMP pages more interactive. Next.js will automatically import all components used on a page and there is no need to manually import AMP component scripts:

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

The above example uses the amp-timeago component.

By default, the latest version of a component is always imported. If you want to customize the version, you can use next/head, as in the following example:

import Head from 'next/head'

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <Head>
        <script
          async
          key="amp-timeago"
          custom-element="amp-timeago"
          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
        />
      </Head>

      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

1.6 KiB Raw Blame History

Adding AMP Components

1.6 KiB

Raw Blame History