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() ? ( + + ) : ( + a cool image + )} +
+ ) +}, { 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.