diff --git a/packages/next/README.md b/packages/next/README.md
index a7b61a98bc3bda73686bcea30e3adf18566ab642..b4bf9387984bc10e85e92428190aa553210c1aee 100644
--- a/packages/next/README.md
+++ b/packages/next/README.md
@@ -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.
+### AMP First Page
```js
// pages/about.js
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 (
+
+
My AMP Page
+ {useAmp() ? (
+
+ ) : (
+
+ )}
+
+ )
+}, { hybrid: true })
+```
+
### AMP Page Modes
AMP pages can specify two modes:
@@ -1975,8 +2006,9 @@ AMP pages can specify two modes:
- Opt-in via `withAmp(Component)`
- Hybrid
- 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 })`
+ - 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.