terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

An example with react-helmet (#1264)

Browse source 
* 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
This commit is contained in:
Steve Fan 2017-03-15 22:23:42 +08:00 committed by Tim Neutkens
parent 123a635f00
commit a57fa7ebb1
5 changed files with 98 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
examples/with-react-helmet/.DS_Store vendored Normal file
View file

Binary file not shown.

34
examples/with-react-helmet/README.md Normal file
View file

@ -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.

16
examples/with-react-helmet/package.json Normal file
View file

@ -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"
}
}

45
examples/with-react-helmet/pages/_document.js Normal file
View file

@ -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>)
}
}

3
examples/with-react-helmet/pages/index.js Normal file
View file

@ -0,0 +1,3 @@
export default () => (<div>
Hello World!
</div>)