Document useAmp in readme (#7405)

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 (
+    <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 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.