mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
An example with react-helmet (#1264)
* 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:
parent
123a635f00
commit
a57fa7ebb1
BIN
examples/with-react-helmet/.DS_Store
vendored
Normal file
BIN
examples/with-react-helmet/.DS_Store
vendored
Normal file
Binary file not shown.
34
examples/with-react-helmet/README.md
Normal file
34
examples/with-react-helmet/README.md
Normal 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
16
examples/with-react-helmet/package.json
Normal 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
45
examples/with-react-helmet/pages/_document.js
Normal 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
3
examples/with-react-helmet/pages/index.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export default () => (<div>
|
||||||
|
Hello World!
|
||||||
|
</div>)
|
Loading…
Reference in a new issue