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:

  1. export const config = { amp: true }
  3. function MyAmpPage() {
  4.   const date = new Date()
  6.   return (
  7.     <div>
  8.       <p>Some time: {date.toJSON()}</p>
  9.       <amp-timeago
  10.         width="0"
  11.         height="15"
  12.         datetime={date.toJSON()}
  13.         layout="responsive"
  14.       >
  15.         .
  16.       </amp-timeago>
  17.     </div>
  18.   )
  19. }
  21. 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:

  1. import Head from 'next/head'
  3. export const config = { amp: true }
  5. function MyAmpPage() {
  6.   const date = new Date()
  8.   return (
  9.     <div>
  10.       <Head>
  11.         <script
  12.           async
  13.           key="amp-timeago"
  14.           custom-element="amp-timeago"
  15.           src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
  16.         />
  17.       </Head>
  19.       <p>Some time: {date.toJSON()}</p>
  20.       <amp-timeago
  21.         width="0"
  22.         height="15"
  23.         datetime={date.toJSON()}
  24.         layout="responsive"
  25.       >
  26.         .
  27.       </amp-timeago>
  28.     </div>
  29.   )
  30. }
  32. export default MyAmpPage