diff --git a/README.md b/README.md index 8a1c0ceeddb9a..5de7d7c1e0b17 100644 --- a/README.md +++ b/README.md @@ -408,6 +408,7 @@ Supported options:

Examples +

Pages in `Next.js` skip the definition of the surrounding document's markup. For example, you never include ``, ``, etc. To override that default behavior, you must create a file at `./pages/_document.js`, where you can extend the `Document` class: diff --git a/examples/with-amp/README.md b/examples/with-amp/README.md new file mode 100644 index 0000000000000..6227f0c0bf6df --- /dev/null +++ b/examples/with-amp/README.md @@ -0,0 +1,28 @@ + +# Google AMP + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js.git): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-amp +cd with-amp +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +Next.js allows the construction of custom Documents. This feature enable the usage of custom attributes and elements. In this case, AMP tags and attributes. diff --git a/examples/with-amp/components/Byline.js b/examples/with-amp/components/Byline.js new file mode 100644 index 0000000000000..b668b49e03100 --- /dev/null +++ b/examples/with-amp/components/Byline.js @@ -0,0 +1,5 @@ +export default ({ author }) => ( +
+ By {author} +
+) diff --git a/examples/with-amp/package.json b/examples/with-amp/package.json new file mode 100644 index 0000000000000..60382442a316b --- /dev/null +++ b/examples/with-amp/package.json @@ -0,0 +1,14 @@ +{ + "name": "amp", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "^2.0.0-beta" + }, + "author": "", + "license": "ISC" +} diff --git a/examples/with-amp/pages/_document.js b/examples/with-amp/pages/_document.js new file mode 100644 index 0000000000000..8a27e985d4401 --- /dev/null +++ b/examples/with-amp/pages/_document.js @@ -0,0 +1,32 @@ +import Document, { Head } from 'next/document' +import { DOMProperty } from 'react-dom/../lib/ReactInjection' + +// By default React limit the set of valid DOM elements and attributes +// (https://github.com/facebook/react/issues140) this config whitelist +// Amp elements/attributes +DOMProperty.injectDOMPropertyConfig({ + Properties: { amp: DOMProperty.MUST_USE_ATTRIBUTE }, + isCustomAttribute: attributeName => attributeName.startsWith('amp-') +}) + +export default class MyDocument extends Document { + render () { + const { html } = this.props + return ( + + + + + + + + +