ae9b13e0be
* 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>
1.6 KiB
1.6 KiB
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