Fix with-emotion examples (#13005)

vercel · May 18, 2020 · 36ddada · 36ddada
1 parent 97587eb
commit 36ddada
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 20 deletions.
diff --git a/examples/with-emotion-11/pages/_document.js b/examples/with-emotion-11/pages/_document.js
@@ -2,21 +2,27 @@ import Document, { Head, Main, NextScript } from 'next/document'
 import { extractCritical } from '@emotion/server'
 
 export default class MyDocument extends Document {
-  static getInitialProps({ renderPage }) {
-    const page = renderPage()
-    const styles = extractCritical(page.html)
-    return { ...page, ...styles }
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    const styles = extractCritical(initialProps.html)
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <style
+            data-emotion-css={styles.ids.join(' ')}
+            dangerouslySetInnerHTML={{ __html: styles.css }}
+          />
+        </>
+      ),
+    }
   }
 
   render() {
     return (
       <html>
-        <Head>
-          <style
-            data-emotion-css={this.props.ids.join(' ')}
-            dangerouslySetInnerHTML={{ __html: this.props.css }}
-          />
-        </Head>
+        <Head />
         <body>
           <Main />
           <NextScript />

diff --git a/examples/with-emotion/pages/_document.js b/examples/with-emotion/pages/_document.js
@@ -2,21 +2,27 @@ import Document, { Head, Main, NextScript } from 'next/document'
 import { extractCritical } from 'emotion-server'
 
 export default class MyDocument extends Document {
-  static getInitialProps({ renderPage }) {
-    const page = renderPage()
-    const styles = extractCritical(page.html)
-    return { ...page, ...styles }
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    const styles = extractCritical(initialProps.html)
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <style
+            data-emotion-css={styles.ids.join(' ')}
+            dangerouslySetInnerHTML={{ __html: styles.css }}
+          />
+        </>
+      ),
+    }
   }
 
   render() {
     return (
       <html>
-        <Head>
-          <style
-            data-emotion-css={this.props.ids.join(' ')}
-            dangerouslySetInnerHTML={{ __html: this.props.css }}
-          />
-        </Head>
+        <Head />
         <body>
           <Main />
           <NextScript />