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

Fix first render of with-react-helmet example (#6235)

Browse source
This commit is contained in:
Fredrik Höglund 2019-02-10 20:48:13 +01:00 committed by Tim Neutkens
parent 63c25a9c60
commit b05df70872
4 changed files with 44 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/with-react-helmet/README.md
View file

@ -46,4 +46,5 @@ now
This an minimalistic example of how to combine next.js and [react-helmet](https://github.com/nfl/react-helmet). 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 title of the page shall be changed to "Hello next.js!"
If you go to the page `/about`, the title will be overridden to "About | Hello next.js!"
The rest is all up to you. The rest is all up to you.

33
examples/with-react-helmet/pages/_app.js Normal file
View file

@ -0,0 +1,33 @@
import React from 'react'
import App, { Container } from 'next/app'
import Helmet from 'react-helmet'
export default class MyApp extends App {
static async getInitialProps ({ Component, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps }
}
render () {
const { Component, pageProps } = this.props
return (
<Container>
<Helmet
htmlAttributes={{ lang: 'en' }}
title='Hello next.js!'
meta={[
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ property: 'og:title', content: 'Hello next.js!' }
]}
/>
<Component {...pageProps} />
</Container>
)
}
}

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

@ -26,24 +26,10 @@ export default class extends Document {
.map(el => this.props.helmet[el].toComponent()) .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' },
{ property: 'og:title', content: 'Hello next.js!' }
]}
/>
)
}
render () { render () {
return ( return (
<html {...this.helmetHtmlAttrComponents}> <html {...this.helmetHtmlAttrComponents}>
<Head> <Head>
{this.helmetJsx}
{this.helmetHeadComponents} {this.helmetHeadComponents}
</Head> </Head>
<body {...this.helmetBodyAttrComponents}> <body {...this.helmetBodyAttrComponents}>

30
examples/with-react-helmet/pages/about.js
View file

@ -1,24 +1,14 @@
import React from 'react' import React from 'react'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
export default class About extends React.Component { export default function About () {
static async getInitialProps ({ req }) { return (
if (req) { <div>
Helmet.renderStatic() <Helmet
} title='About | Hello next.js!'
return { title: 'About' } meta={[{ property: 'og:title', content: 'About' }]}
} />
About the World
render () { </div>
const { title } = this.props )
return (
<div>
<Helmet
title={`${title} | Hello next.js!`}
meta={[{ property: 'og:title', content: title }]}
/>
About the World
</div>
)
}
} }