Skip to content

Commit 3ad3a6c

Browse files
impronunciablearunoda
impronunciable
authored and
arunoda
committed
Added Google AMP example (#793)
* Added Google AMP example * Added styles and a second page * Using regular anchor since there is no client-side routing * Added comment on react config for amp
1 parent cbb2d1c commit 3ad3a6c

File tree

9 files changed

+118
-0
lines changed

9 files changed

+118
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -408,6 +408,7 @@ Supported options:
408408
<p><details>
409409
<summary><b>Examples</b></summary>
410410
<ul><li><a href="./examples/with-styled-components">Styled components custom document</a></li></ul>
411+
<ul><li><a href="./examples/with-amp">Google AMP</a></li></ul>
411412
</details></p>
412413

413414
Pages in `Next.js` skip the definition of the surrounding document's markup. For example, you never include `<html>`, `<body>`, etc. To override that default behavior, you must create a file at `./pages/_document.js`, where you can extend the `Document` class:

‎examples/with-amp/README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
# Google AMP
3+
4+
## How to use
5+
6+
Download the example [or clone the repo](https://github.com/zeit/next.js.git):
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-amp
10+
cd with-amp
11+
```
12+
13+
Install it and run:
14+
15+
```bash
16+
npm install
17+
npm run dev
18+
```
19+
20+
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
21+
22+
```bash
23+
now
24+
```
25+
26+
## The idea behind the example
27+
28+
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.

‎examples/with-amp/components/Byline.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default ({ author }) => (
2+
<div className='byline'>
3+
By {author}
4+
</div>
5+
)

‎examples/with-amp/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "amp",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"next": "^2.0.0-beta"
11+
},
12+
"author": "",
13+
"license": "ISC"
14+
}

‎examples/with-amp/pages/_document.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Document, { Head } from 'next/document'
2+
import { DOMProperty } from 'react-dom/../lib/ReactInjection'
3+
4+
// By default React limit the set of valid DOM elements and attributes
5+
// (https://github.com/facebook/react/issues140) this config whitelist
6+
// Amp elements/attributes
7+
DOMProperty.injectDOMPropertyConfig({
8+
Properties: { amp: DOMProperty.MUST_USE_ATTRIBUTE },
9+
isCustomAttribute: attributeName => attributeName.startsWith('amp-')
10+
})
11+
12+
export default class MyDocument extends Document {
13+
render () {
14+
const { html } = this.props
15+
return (
16+
<html amp=''>
17+
<Head>
18+
<meta charset='utf-8' />
19+
<link rel='canonical' href='/' />
20+
<meta name='viewport' content='width=device-width,minimum-scale=1' />
21+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' />
22+
<style amp-boilerplate=''>{`body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}`}</style><noscript><style amp-boilerplate=''>{`body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}`}</style></noscript>
23+
<style amp-custom=''>{`body {font-family: Roboto, sans-serif; padding: 30px; color: #444;} h1 {margin-bottom: 5px;} .byline { color: #aaa; margin-bottom: 25px; } p {font-size: 18px; line-height: 30px; margin-top: 30px;} .caption {color: #ccc; margin-top: 0; font-size: 14px; text-align: center;}`}</style>
24+
<script async src='https://cdn.ampproject.org/v0.js' />
25+
</Head>
26+
<body>
27+
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
28+
</body>
29+
</html>
30+
)
31+
}
32+
}

‎examples/with-amp/pages/dog.js‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/with-amp/pages/index.js‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/with-amp/static/cat.jpg‎

39.2 KB
Loading

‎examples/with-amp/static/dog.jpg‎

64.7 KB
Loading

0 commit comments

Comments
 (0)