Add AMP docs to README (#7031)

* Add AMP docs to README * Update wording Co-Authored-By: N ijjk <jj@jjsweb.site> * remove extra space Co-Authored-By: N ijjk <jj@jjsweb.site> * Apply suggestions from code review Co-Authored-By: N ijjk <jj@jjsweb.site> * Apply suggestions from code review Co-Authored-By: N ijjk <jj@jjsweb.site>

Add AMP docs to README (#7031)
* Add AMP docs to README * Update wording Co-Authored-By: N ijjk <jj@jjsweb.site> * remove extra space Co-Authored-By: N ijjk <jj@jjsweb.site> * Apply suggestions from code review Co-Authored-By: N ijjk <jj@jjsweb.site> * Apply suggestions from code review Co-Authored-By: N ijjk <jj@jjsweb.site>
016c197b · JJ Kasper · Joe Haddad · 1a53ca74 · 016c197b
隐藏空白更改
内联并排

Showing with 97 addition and 0 deletion

packages/next/README.md packages/next/README.md +97 -0

未找到文件。
--- a/packages/next/README.md
+++ b/packages/next/README.md
@@ -75,6 +75,7 @@
    - [One Level Lower](#one-level-lower)
    - [Summary](#summary)
 - [Browser support](#browser-support)
+- [AMP Support](#amp-support)
 - [Static HTML export](#static-html-export)
  - [Usage](#usage)
  - [Copying custom files](#copying-custom-files)
@@ -1878,6 +1879,102 @@ Next.js supports IE11 and all modern browsers out of the box using [`@babel/pres

 The [polyfills](https://github.com/zeit/next.js/tree/canary/examples/with-polyfills) example demonstrates the recommended approach to implement polyfills.

+## AMP Support
+
+### Enabling AMP Support
+
+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.
+
+```js
+// next.config.js
+module.exports = {
+  experimental: { amp: true }
+}
+
+// pages/about.js
+import { withAmp } from 'next/amp'
+
+export default withAmp(function AboutPage(props) {
+  return (
+    <h3>My AMP About Page!</h3>
+  )
+})
+```
+
+### AMP Page Modes
+
+AMP pages can specify two modes:
+
+- AMP-only (default)
+    - Pages have no Next.js or React client-side runtime
+    - Pages are automatically optimized with [AMP Optimizer](https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer), an optimizer that applies the same transformations as AMP caches (improves performance by up to 42%)
+    - Pages have a user-accessible (optimized) version of the page and a search-engine indexable (unoptimized) version of the page
+    - 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
+    - Opt-in via `withAmp(Component, { hybrid: true })`
+
+Both of these page modes provide a consistently fast experience for users accessing pages through search engines.
+
+### AMP Behavior with `next export`
+
+When using `next export` to statically pre-render pages Next.js will detect if the page supports AMP and change the exporting behavior based on that.
+
+Hybrid AMP (`pages/about.js`) would output:
+
+- `out/about/index.html` - with client-side React runtime
+- `out/about.amp/index.html` - AMP page
+
+AMP-only (`pages/about.js`) would output:
+
+- `out/about/index.html` - Optimized AMP page
+- `out/about.amp/index.html` - AMP page
+
+During export Next.js automatically detects if a page is AMP-only and apply dirty/clean optimizations. The dirty version will be output to `page/index.html` and the clean version will be output to `page.amp/index.html`. We also automatically insert the `<link rel="amphtml" href="/page.amp" />` and `<link rel="canonical" href="/" />` tags for you. 
+
+### Adding AMP Components
+
+The AMP community provides [many components](https://amp.dev/documentation/components/) to make AMP pages more interactive. You can add these components to your page by using `next/head`:
+
+```js
+// pages/hello.js
+import Head from 'next/head'
+import { withAmp } from 'next/amp'
+
+export default withAmp(function MyAmpPage() {
+  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>
+  )
+})
+```
+
+### AMP Validation
+
+AMP pages are automatically validated with [amphtml-validator](https://www.npmjs.com/package/amphtml-validator) during development. Errors and warnings will appear in the terminal where you started Next.js.
+
+Pages are also validated during `next export` and any warnings / errors will be printed to the terminal.
+Any AMP errors will cause `next export` to exit with status code `1` because the export is not valid AMP.
+
 ## Static HTML export

 <details>