An example with react-helmet (#1264)

cia48621793 · timneutkens · commit a57fa7ebb1a4 · 2017-03-15T15:23:42.000+01:00
* upload example

* fix

* fix

* fix

* fix .babelrc

* fix standard style

* fix indent

* rename helmetHead to helmet

* added gitignore

* package.json

* removed yarn.lock

* Added more examples of using react-helmet

* removed gitignore
diff --git a/examples/with-react-helmet/.DS_Store b/examples/with-react-helmet/.DS_Store
diff --git a/examples/with-react-helmet/README.md b/examples/with-react-helmet/README.md
@@ -0,0 +1,34 @@
+
+# react-helmet example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-helmet
+cd with-react-helmet
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+_Or alternatively:_
+```bash
+yarn
+yarn run dev
+```
+
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+## Notes
+This an minimalistic example of how to combine next.js and [react-helmet](https://github.com/nfl/react-helmet).
+The title of the page shall be changed to "Hello next.js!"
+The rest is all up to you.
diff --git a/examples/with-react-helmet/package.json b/examples/with-react-helmet/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "with-react-helmet",
+  "license": "ISC",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^2.0.0-beta",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-helmet": "^4.0.0"
+  }
+}
diff --git a/examples/with-react-helmet/pages/_document.js b/examples/with-react-helmet/pages/_document.js
@@ -0,0 +1,45 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import Helmet from 'react-helmet'
+
+export default class extends Document {
+  static async getInitialProps ({ renderPage }) {
+    // see https://github.com/nfl/react-helmet#server-usage for more information
+    // 'head' was occupied by 'renderPage().head', we cannot use it
+    return { ...renderPage(), helmet: Helmet.rewind() }
+  }
+
+  // should render on <html>
+  get helmetHtmlAttrComponents () {
+    return this.props.helmet.htmlAttributes.toComponent()
+  }
+
+  // should render on <head>
+  get helmetHeadComponents () {
+    return Object.keys(this.props.helmet)
+        .filter(el => el !== 'htmlAttributes') // remove htmlAttributes which is not for <head> but for <html>
+        .map(el => this.props.helmet[el].toComponent())
+  }
+
+  get helmetJsx () {
+    return (<Helmet
+      htmlAttributes={{lang: 'en'}}
+      title='Hello next.js!'
+      meta={[
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+      ]}
+    />)
+  }
+
+  render () {
+    return (<html {...this.helmetHtmlAttrComponents}>
+      <Head>
+        { this.helmetJsx }
+        { this.helmetHeadComponents }
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </html>)
+  }
+}
diff --git a/examples/with-react-helmet/pages/index.js b/examples/with-react-helmet/pages/index.js
@@ -0,0 +1,3 @@
+export default () => (<div>
+  Hello World!
+</div>)

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default () => (<div>`
	`2`	`+ Hello World!`
	`3`	`+</div>)`