Document useAmp in readme (#7405)
This commit is contained in:
parent
c0e4b56fdb
commit
4718bd675f
1 changed files with 33 additions and 1 deletions
|
@ -1953,6 +1953,7 @@ export default Page
|
||||||
|
|
||||||
To enable AMP support for a page, first enable experimental AMP support in your `next.config.js` and then import `withAmp` from `next/amp` and wrap your page's component in it.
|
To enable AMP support for a page, first enable experimental AMP support in your `next.config.js` and then import `withAmp` from `next/amp` and wrap your page's component in it.
|
||||||
|
|
||||||
|
### AMP First Page
|
||||||
```js
|
```js
|
||||||
// pages/about.js
|
// pages/about.js
|
||||||
import { withAmp } from 'next/amp'
|
import { withAmp } from 'next/amp'
|
||||||
|
@ -1964,6 +1965,36 @@ export default withAmp(function AboutPage(props) {
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Hybrid AMP Page
|
||||||
|
```js
|
||||||
|
// pages/hybrid-about.js
|
||||||
|
import { withAmp, useAmp } from 'next/amp'
|
||||||
|
|
||||||
|
export default withAmp(function AboutPage(props) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h3>My AMP Page</h3>
|
||||||
|
{useAmp() ? (
|
||||||
|
<amp-img
|
||||||
|
width='300'
|
||||||
|
height='300'
|
||||||
|
src='/my-img.jpg'
|
||||||
|
alt='a cool image'
|
||||||
|
layout='responsive'
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
width='300'
|
||||||
|
height='300'
|
||||||
|
src='/my-img.jpg'
|
||||||
|
alt='a cool image'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}, { hybrid: true })
|
||||||
|
```
|
||||||
|
|
||||||
### AMP Page Modes
|
### AMP Page Modes
|
||||||
|
|
||||||
AMP pages can specify two modes:
|
AMP pages can specify two modes:
|
||||||
|
@ -1975,8 +2006,9 @@ AMP pages can specify two modes:
|
||||||
- Opt-in via `withAmp(Component)`
|
- Opt-in via `withAmp(Component)`
|
||||||
- Hybrid
|
- Hybrid
|
||||||
- Pages are able to be rendered as traditional HTML (default) and AMP HTML (by adding `?amp=1` to the URL)
|
- Pages are able to be rendered as traditional HTML (default) and AMP HTML (by adding `?amp=1` to the URL)
|
||||||
- The AMP version of the page is not optimized with AMP Optimizer so that it is indexable by search-engines
|
- The AMP version of the page only has valid optimizations applied with AMP Optimizer so that it is indexable by search-engines
|
||||||
- Opt-in via `withAmp(Component, { hybrid: true })`
|
- Opt-in via `withAmp(Component, { hybrid: true })`
|
||||||
|
- Able to differentiate between modes using `useAmp` from `next/amp`
|
||||||
|
|
||||||
Both of these page modes provide a consistently fast experience for users accessing pages through search engines.
|
Both of these page modes provide a consistently fast experience for users accessing pages through search engines.
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue