rsnext/docs/advanced-features/amp-support/adding-amp-components.md
Luis Alvarez D d1fdd2bbf8 Add descriptions to documentation pages (#9901)
* Added descriptions

* Added descriptions to API Reference

* Added descriptions to API Routes

* Added descriptions to basic features

* Added descriptions to the routing docs

* Update exportPathMap.md

Co-authored-by: Joe Haddad <timer150@gmail.com>
2020-01-03 13:16:51 -05:00

1 KiB

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

Adding AMP Components

The AMP community provide many components to make AMP pages more interactive. You can add these components to your page by using 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

The above example uses the amp-timeago component.