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>
70 lines
1.6 KiB
Markdown
70 lines
1.6 KiB
Markdown
---
|
|
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](https://amp.dev/documentation/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:
|
|
|
|
```jsx
|
|
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`](https://amp.dev/documentation/components/amp-timeago/?format=websites) 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:
|
|
|
|
```jsx
|
|
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
|
|
```
|