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

vercel · Feb 10, 2019 · b05df70 · b05df70
1 parent 63c25a9
commit b05df70
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 34 deletions.
diff --git a/examples/with-react-helmet/README.md b/examples/with-react-helmet/README.md
@@ -46,4 +46,5 @@ now
 
 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!"
+If you go to the page `/about`, the title will be overridden to "About | Hello next.js!"
 The rest is all up to you.
diff --git a/examples/with-react-helmet/pages/_app.js b/examples/with-react-helmet/pages/_app.js
@@ -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>
+    )
+  }
+}
diff --git a/examples/with-react-helmet/pages/_document.js b/examples/with-react-helmet/pages/_document.js
@@ -26,24 +26,10 @@ export default class extends Document {
       .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 () {
     return (
       <html {...this.helmetHtmlAttrComponents}>
         <Head>
-          {this.helmetJsx}
           {this.helmetHeadComponents}
         </Head>
         <body {...this.helmetBodyAttrComponents}>

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