From 313d5bf6a63b375bac26bb608af9cabcb41b0632 Mon Sep 17 00:00:00 2001
From: Aziz Khambati <aziz.h.khambati@gmail.com>
Date: Fri, 6 Dec 2019 14:49:34 +0530
Subject: [PATCH 1/4] Update emotion to v10, use @emotion/core, @emotion/styled

---
 examples/with-emotion-fiber/README.md         |  6 ++-
 .../features/home.component.js                | 12 ------
 .../hoc/withEmotion.component.js              | 22 ----------
 examples/with-emotion-fiber/package.json      |  8 ++--
 examples/with-emotion-fiber/pages/_app.js     | 17 ++++++++
 .../with-emotion-fiber/pages/_document.js     | 18 ++++-----
 examples/with-emotion-fiber/pages/index.js    | 14 +++++--
 .../with-emotion-fiber/shared/emotionCache.js |  2 +
 examples/with-emotion-fiber/shared/styles.js  | 40 +++++++++++--------
 9 files changed, 70 insertions(+), 69 deletions(-)
 delete mode 100644 examples/with-emotion-fiber/features/home.component.js
 delete mode 100644 examples/with-emotion-fiber/hoc/withEmotion.component.js
 create mode 100644 examples/with-emotion-fiber/pages/_app.js
 create mode 100644 examples/with-emotion-fiber/shared/emotionCache.js

diff --git a/examples/with-emotion-fiber/README.md b/examples/with-emotion-fiber/README.md
index e1ac6c925b265c8..6703d7ef8752297 100644
--- a/examples/with-emotion-fiber/README.md
+++ b/examples/with-emotion-fiber/README.md
@@ -45,4 +45,8 @@ now
 
 ## The idea behind the example
 
-Extract and inline critical css with [emotion](https://github.com/emotion-js/emotion) using [emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server) and [react-emotion](https://github.com/emotion-js/emotion/tree/master/packages/react-emotion).
+Extract and inline critical css with:
+
+- [@emotion/core](https://github.com/emotion-js/emotion/tree/master/packages/core)
+- [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled)
+- [create-emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/create-emotion-server)
diff --git a/examples/with-emotion-fiber/features/home.component.js b/examples/with-emotion-fiber/features/home.component.js
deleted file mode 100644
index c8ec563fdd76926..000000000000000
--- a/examples/with-emotion-fiber/features/home.component.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Basic, Combined, Animated, bounce } from '../shared/styles'
-const Home = () => (
-  <div>
-    <Basic>Cool Styles</Basic>
-    <Combined>
-      With <code>:hover</code>.
-    </Combined>
-    <Animated animation={bounce}>Let's bounce.</Animated>
-  </div>
-)
-
-export default Home
diff --git a/examples/with-emotion-fiber/hoc/withEmotion.component.js b/examples/with-emotion-fiber/hoc/withEmotion.component.js
deleted file mode 100644
index 6c0c5c04b083c17..000000000000000
--- a/examples/with-emotion-fiber/hoc/withEmotion.component.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { Component } from 'react'
-import { hydrate } from 'react-emotion'
-import { injectGlobalStyles } from '../shared/styles'
-
-const withEmotion = ComposedComponent => {
-  class HOC extends Component {
-    UNSAFE_componentWillMount() {
-      if (typeof window !== 'undefined') {
-        hydrate(window.__NEXT_DATA__.ids)
-      }
-      injectGlobalStyles()
-    }
-
-    render() {
-      return <ComposedComponent />
-    }
-  }
-
-  return HOC
-}
-
-export default withEmotion
diff --git a/examples/with-emotion-fiber/package.json b/examples/with-emotion-fiber/package.json
index c06dcb5184e4ec7..9d8bf41920e35c4 100644
--- a/examples/with-emotion-fiber/package.json
+++ b/examples/with-emotion-fiber/package.json
@@ -12,11 +12,11 @@
   "author": "Thomas Greco",
   "license": "ISC",
   "dependencies": {
-    "emotion": "^8.0.11",
-    "emotion-server": "^8.0.11",
+    "@emotion/core": "10.0.22",
+    "@emotion/styled": "10.0.23",
+    "create-emotion-server": "10.0.14",
     "next": "latest",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-emotion": "^8.0.11"
+    "react-dom": "^16.7.0"
   }
 }
diff --git a/examples/with-emotion-fiber/pages/_app.js b/examples/with-emotion-fiber/pages/_app.js
new file mode 100644
index 000000000000000..123b19842a021f9
--- /dev/null
+++ b/examples/with-emotion-fiber/pages/_app.js
@@ -0,0 +1,17 @@
+import * as React from 'react'
+import NextApp from 'next/app'
+import { CacheProvider } from '@emotion/core'
+import { globalStyles } from '../shared/styles'
+import { emotionCache } from '../shared/emotionCache'
+
+export default class App extends NextApp {
+  render() {
+    const { Component, pageProps } = this.props
+    return (
+      <CacheProvider value={emotionCache}>
+        {globalStyles}
+        <Component {...pageProps} />
+      </CacheProvider>
+    )
+  }
+}
diff --git a/examples/with-emotion-fiber/pages/_document.js b/examples/with-emotion-fiber/pages/_document.js
index a7c1502188d1c82..45dd4fec88db55c 100644
--- a/examples/with-emotion-fiber/pages/_document.js
+++ b/examples/with-emotion-fiber/pages/_document.js
@@ -1,5 +1,8 @@
 import Document, { Head, Main, NextScript } from 'next/document'
-import { extractCritical } from 'emotion-server'
+import createEmotionServer from 'create-emotion-server'
+import { emotionCache } from '../shared/emotionCache'
+
+const { extractCritical } = createEmotionServer(emotionCache)
 
 export default class MyDocument extends Document {
   static getInitialProps({ renderPage }) {
@@ -8,19 +11,14 @@ export default class MyDocument extends Document {
     return { ...page, ...styles }
   }
 
-  constructor(props) {
-    super(props)
-    const { __NEXT_DATA__, ids } = props
-    if (ids) {
-      __NEXT_DATA__.ids = ids
-    }
-  }
-
   render() {
     return (
       <html>
         <Head>
-          <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
+          <style
+            data-emotion-css={this.props.ids.join(' ')}
+            dangerouslySetInnerHTML={{ __html: this.props.css }}
+          />
         </Head>
         <body>
           <Main />
diff --git a/examples/with-emotion-fiber/pages/index.js b/examples/with-emotion-fiber/pages/index.js
index 4fb60f94ec6f01b..c8ec563fdd76926 100644
--- a/examples/with-emotion-fiber/pages/index.js
+++ b/examples/with-emotion-fiber/pages/index.js
@@ -1,4 +1,12 @@
-import withEmotion from '../hoc/withEmotion.component'
-import home from '../features/home.component'
+import { Basic, Combined, Animated, bounce } from '../shared/styles'
+const Home = () => (
+  <div>
+    <Basic>Cool Styles</Basic>
+    <Combined>
+      With <code>:hover</code>.
+    </Combined>
+    <Animated animation={bounce}>Let's bounce.</Animated>
+  </div>
+)
 
-export default withEmotion(home)
+export default Home
diff --git a/examples/with-emotion-fiber/shared/emotionCache.js b/examples/with-emotion-fiber/shared/emotionCache.js
new file mode 100644
index 000000000000000..6ad2ba24ee21a40
--- /dev/null
+++ b/examples/with-emotion-fiber/shared/emotionCache.js
@@ -0,0 +1,2 @@
+import createCache from '@emotion/cache'
+export const emotionCache = createCache()
diff --git a/examples/with-emotion-fiber/shared/styles.js b/examples/with-emotion-fiber/shared/styles.js
index 8c2789780b0e7d9..eb1879bf70dd328 100644
--- a/examples/with-emotion-fiber/shared/styles.js
+++ b/examples/with-emotion-fiber/shared/styles.js
@@ -1,15 +1,21 @@
-import styled, { keyframes, css, injectGlobal } from 'react-emotion'
+import { keyframes, css, Global } from '@emotion/core'
+import styled from '@emotion/styled'
 
-export const injectGlobalStyles = () => injectGlobal`
-html, body {
-  padding: 3rem 1rem;
-  margin: 0;
-  background: papayawhip;
-  min-height: 100%;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 24px;
-}
-`
+export const globalStyles = (
+  <Global
+    styles={css`
+      html,
+      body {
+        padding: 3rem 1rem;
+        margin: 0;
+        background: papayawhip;
+        min-height: 100%;
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 24px;
+      }
+    `}
+  />
+)
 
 export const basicStyles = css`
   background-color: white;
@@ -32,12 +38,12 @@ export const hoverStyles = css`
   }
 `
 export const bounce = keyframes`
-from {
-transform: scale(1.01);
-}
-to {
-transform: scale(0.99);
-}
+  from {
+    transform: scale(1.01);
+  }
+  to {
+    transform: scale(0.99);
+  }
 `
 
 export const Basic = styled('div')`

From 7e12529b05291c7237f8c1b9e7ec60541cf269ae Mon Sep 17 00:00:00 2001
From: Aziz Khambati <aziz.h.khambati@gmail.com>
Date: Mon, 6 Jan 2020 13:27:21 +0530
Subject: [PATCH 2/4] Add with-emotion-11 and make review changes

---
 .../README.md                                 |  9 +--
 .../package.json                              |  7 +-
 .../pages/_app.js                             |  8 ++-
 .../pages/_document.js                        |  5 +-
 .../pages/index.js                            |  0
 .../shared/styles.js                          |  0
 examples/with-emotion-11/README.md            | 51 ++++++++++++++
 examples/with-emotion-11/package.json         | 24 +++++++
 examples/with-emotion-11/pages/_app.js        | 18 +++++
 examples/with-emotion-11/pages/_document.js   | 27 ++++++++
 examples/with-emotion-11/pages/index.js       | 12 ++++
 examples/with-emotion-11/shared/styles.js     | 67 +++++++++++++++++++
 .../with-emotion-fiber/shared/emotionCache.js |  2 -
 13 files changed, 215 insertions(+), 15 deletions(-)
 rename examples/{with-emotion-fiber => with-emotion-10}/README.md (77%)
 rename examples/{with-emotion-fiber => with-emotion-10}/package.json (74%)
 rename examples/{with-emotion-fiber => with-emotion-10}/pages/_app.js (74%)
 rename examples/{with-emotion-fiber => with-emotion-10}/pages/_document.js (77%)
 rename examples/{with-emotion-fiber => with-emotion-10}/pages/index.js (100%)
 rename examples/{with-emotion-fiber => with-emotion-10}/shared/styles.js (100%)
 create mode 100644 examples/with-emotion-11/README.md
 create mode 100644 examples/with-emotion-11/package.json
 create mode 100644 examples/with-emotion-11/pages/_app.js
 create mode 100644 examples/with-emotion-11/pages/_document.js
 create mode 100644 examples/with-emotion-11/pages/index.js
 create mode 100644 examples/with-emotion-11/shared/styles.js
 delete mode 100644 examples/with-emotion-fiber/shared/emotionCache.js

diff --git a/examples/with-emotion-fiber/README.md b/examples/with-emotion-10/README.md
similarity index 77%
rename from examples/with-emotion-fiber/README.md
rename to examples/with-emotion-10/README.md
index 6703d7ef8752297..27e16ab461f4469 100644
--- a/examples/with-emotion-fiber/README.md
+++ b/examples/with-emotion-10/README.md
@@ -4,7 +4,7 @@
 
 Deploy the example using [ZEIT Now](https://zeit.co/now):
 
-[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-fiber)
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-10)
 
 ## How to use
 
@@ -13,9 +13,9 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
 Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-emotion-fiber with-emotion-fiber-app
+npx create-next-app --example with-emotion-10 with-emotion-10-app
 # or
-yarn create next-app --example with-emotion-fiber with-emotion-fiber-app
+yarn create next-app --example with-emotion-10 with-emotion-10-app
 ```
 
 ### Download manually
@@ -47,6 +47,7 @@ now
 
 Extract and inline critical css with:
 
+- [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion)
+- [emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server)
 - [@emotion/core](https://github.com/emotion-js/emotion/tree/master/packages/core)
 - [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled)
-- [create-emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/create-emotion-server)
diff --git a/examples/with-emotion-fiber/package.json b/examples/with-emotion-10/package.json
similarity index 74%
rename from examples/with-emotion-fiber/package.json
rename to examples/with-emotion-10/package.json
index 9d8bf41920e35c4..e265faa77acdaff 100644
--- a/examples/with-emotion-fiber/package.json
+++ b/examples/with-emotion-10/package.json
@@ -12,9 +12,10 @@
   "author": "Thomas Greco",
   "license": "ISC",
   "dependencies": {
-    "@emotion/core": "10.0.22",
-    "@emotion/styled": "10.0.23",
-    "create-emotion-server": "10.0.14",
+    "@emotion/core": "10.0.27",
+    "@emotion/styled": "10.0.27",
+    "emotion": "10.0.27",
+    "emotion-server": "10.0.27",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
diff --git a/examples/with-emotion-fiber/pages/_app.js b/examples/with-emotion-10/pages/_app.js
similarity index 74%
rename from examples/with-emotion-fiber/pages/_app.js
rename to examples/with-emotion-10/pages/_app.js
index 123b19842a021f9..c8d4d8b53f0dfcb 100644
--- a/examples/with-emotion-fiber/pages/_app.js
+++ b/examples/with-emotion-10/pages/_app.js
@@ -1,14 +1,18 @@
 import * as React from 'react'
 import NextApp from 'next/app'
 import { CacheProvider } from '@emotion/core'
+
+// Use only { cache } from 'emotion'. Don't use { css }.
+import { cache } from 'emotion'
+
 import { globalStyles } from '../shared/styles'
-import { emotionCache } from '../shared/emotionCache'
+
 
 export default class App extends NextApp {
   render() {
     const { Component, pageProps } = this.props
     return (
-      <CacheProvider value={emotionCache}>
+      <CacheProvider value={cache}>
         {globalStyles}
         <Component {...pageProps} />
       </CacheProvider>
diff --git a/examples/with-emotion-fiber/pages/_document.js b/examples/with-emotion-10/pages/_document.js
similarity index 77%
rename from examples/with-emotion-fiber/pages/_document.js
rename to examples/with-emotion-10/pages/_document.js
index 45dd4fec88db55c..fdee560d39398f6 100644
--- a/examples/with-emotion-fiber/pages/_document.js
+++ b/examples/with-emotion-10/pages/_document.js
@@ -1,8 +1,5 @@
 import Document, { Head, Main, NextScript } from 'next/document'
-import createEmotionServer from 'create-emotion-server'
-import { emotionCache } from '../shared/emotionCache'
-
-const { extractCritical } = createEmotionServer(emotionCache)
+import { extractCritical } from 'emotion-server'
 
 export default class MyDocument extends Document {
   static getInitialProps({ renderPage }) {
diff --git a/examples/with-emotion-fiber/pages/index.js b/examples/with-emotion-10/pages/index.js
similarity index 100%
rename from examples/with-emotion-fiber/pages/index.js
rename to examples/with-emotion-10/pages/index.js
diff --git a/examples/with-emotion-fiber/shared/styles.js b/examples/with-emotion-10/shared/styles.js
similarity index 100%
rename from examples/with-emotion-fiber/shared/styles.js
rename to examples/with-emotion-10/shared/styles.js
diff --git a/examples/with-emotion-11/README.md b/examples/with-emotion-11/README.md
new file mode 100644
index 000000000000000..d203e653bb33e54
--- /dev/null
+++ b/examples/with-emotion-11/README.md
@@ -0,0 +1,51 @@
+# Pass Server Data Directly to a Next.js Page during SSR
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-10)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-emotion-10 with-emotion-10-app
+# or
+yarn create next-app --example with-emotion-10 with-emotion-10-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-fiber
+cd with-emotion-fiber
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
+
+## The idea behind the example
+
+Extract and inline critical css with:
+
+- [@emotion/react](https://www.npmjs.com/package/@emotion/react)
+- [@emotion/styled](https://www.npmjs.com/package/@emotion/styled)
diff --git a/examples/with-emotion-11/package.json b/examples/with-emotion-11/package.json
new file mode 100644
index 000000000000000..e231a1e248df5fa
--- /dev/null
+++ b/examples/with-emotion-11/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "with-emotion-fiber",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "keywords": [],
+  "author": "Thomas Greco",
+  "license": "ISC",
+  "dependencies": {
+    "@emotion/cache": "11.0.0-next.10",
+    "@emotion/css": "11.0.0-next.10",
+    "@emotion/react": "11.0.0-next.10",
+    "@emotion/server": "11.0.0-next.10",
+    "@emotion/styled": "11.0.0-next.10",
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  }
+}
diff --git a/examples/with-emotion-11/pages/_app.js b/examples/with-emotion-11/pages/_app.js
new file mode 100644
index 000000000000000..2a53b0890a54f95
--- /dev/null
+++ b/examples/with-emotion-11/pages/_app.js
@@ -0,0 +1,18 @@
+import * as React from 'react'
+import NextApp from 'next/app'
+import { CacheProvider } from '@emotion/react'
+import { cache } from '@emotion/css'
+import { globalStyles } from '../shared/styles'
+
+
+export default class App extends NextApp {
+  render() {
+    const { Component, pageProps } = this.props
+    return (
+      <CacheProvider value={cache}>
+        {globalStyles}
+        <Component {...pageProps} />
+      </CacheProvider>
+    )
+  }
+}
diff --git a/examples/with-emotion-11/pages/_document.js b/examples/with-emotion-11/pages/_document.js
new file mode 100644
index 000000000000000..19c14db0a7e010a
--- /dev/null
+++ b/examples/with-emotion-11/pages/_document.js
@@ -0,0 +1,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 }
+  }
+
+  render() {
+    return (
+      <html>
+        <Head>
+          <style
+            data-emotion-css={this.props.ids.join(' ')}
+            dangerouslySetInnerHTML={{ __html: this.props.css }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-emotion-11/pages/index.js b/examples/with-emotion-11/pages/index.js
new file mode 100644
index 000000000000000..c8ec563fdd76926
--- /dev/null
+++ b/examples/with-emotion-11/pages/index.js
@@ -0,0 +1,12 @@
+import { Basic, Combined, Animated, bounce } from '../shared/styles'
+const Home = () => (
+  <div>
+    <Basic>Cool Styles</Basic>
+    <Combined>
+      With <code>:hover</code>.
+    </Combined>
+    <Animated animation={bounce}>Let's bounce.</Animated>
+  </div>
+)
+
+export default Home
diff --git a/examples/with-emotion-11/shared/styles.js b/examples/with-emotion-11/shared/styles.js
new file mode 100644
index 000000000000000..98c80f719d893c9
--- /dev/null
+++ b/examples/with-emotion-11/shared/styles.js
@@ -0,0 +1,67 @@
+import { keyframes, css, Global } from '@emotion/react'
+import styled from '@emotion/styled'
+
+export const globalStyles = (
+  <Global
+    styles={css`
+      html,
+      body {
+        padding: 3rem 1rem;
+        margin: 0;
+        background: papayawhip;
+        min-height: 100%;
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 24px;
+      }
+    `}
+  />
+)
+
+export const basicStyles = css`
+  background-color: white;
+  color: cornflowerblue;
+  border: 1px solid lightgreen;
+  border-right: none;
+  border-bottom: none;
+  box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
+  transition: all 0.1s linear;
+  margin: 3rem 0;
+  padding: 1rem 0.5rem;
+`
+
+export const hoverStyles = css`
+  &:hover {
+    color: white;
+    background-color: lightgray;
+    border-color: aqua;
+    box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+  }
+`
+export const bounce = keyframes`
+  from {
+    transform: scale(1.01);
+  }
+  to {
+    transform: scale(0.99);
+  }
+`
+
+export const Basic = styled('div')`
+  ${basicStyles};
+`
+
+export const Combined = styled('div')`
+  ${basicStyles};
+  ${hoverStyles};
+  & code {
+    background-color: linen;
+  }
+`
+export const Animated = styled('div')`
+  ${basicStyles};
+  ${hoverStyles};
+  & code {
+    background-color: linen;
+  }
+  animation: ${props => props.animation} 0.2s infinite ease-in-out alternate;
+`
diff --git a/examples/with-emotion-fiber/shared/emotionCache.js b/examples/with-emotion-fiber/shared/emotionCache.js
deleted file mode 100644
index 6ad2ba24ee21a40..000000000000000
--- a/examples/with-emotion-fiber/shared/emotionCache.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import createCache from '@emotion/cache'
-export const emotionCache = createCache()

From 91989bb1d822c1a20a2c6ad19c71d9064c7d05d6 Mon Sep 17 00:00:00 2001
From: Aziz Khambati <aziz.h.khambati@gmail.com>
Date: Tue, 7 Jan 2020 12:08:22 +0530
Subject: [PATCH 3/4] Fix package names and run prettier

---
 examples/with-emotion-10/package.json  | 2 +-
 examples/with-emotion-10/pages/_app.js | 1 -
 examples/with-emotion-11/README.md     | 4 ++--
 examples/with-emotion-11/package.json  | 2 +-
 examples/with-emotion-11/pages/_app.js | 1 -
 5 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/examples/with-emotion-10/package.json b/examples/with-emotion-10/package.json
index e265faa77acdaff..e4fa58f9ba08122 100644
--- a/examples/with-emotion-10/package.json
+++ b/examples/with-emotion-10/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "with-emotion-fiber",
+  "name": "with-emotion-10",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
diff --git a/examples/with-emotion-10/pages/_app.js b/examples/with-emotion-10/pages/_app.js
index c8d4d8b53f0dfcb..ff78e95db625af1 100644
--- a/examples/with-emotion-10/pages/_app.js
+++ b/examples/with-emotion-10/pages/_app.js
@@ -7,7 +7,6 @@ import { cache } from 'emotion'
 
 import { globalStyles } from '../shared/styles'
 
-
 export default class App extends NextApp {
   render() {
     const { Component, pageProps } = this.props
diff --git a/examples/with-emotion-11/README.md b/examples/with-emotion-11/README.md
index d203e653bb33e54..9424b9811059bd8 100644
--- a/examples/with-emotion-11/README.md
+++ b/examples/with-emotion-11/README.md
@@ -13,9 +13,9 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
 Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-emotion-10 with-emotion-10-app
+npx create-next-app --example with-emotion-11 with-emotion-11-app
 # or
-yarn create next-app --example with-emotion-10 with-emotion-10-app
+yarn create next-app --example with-emotion-11 with-emotion-11-app
 ```
 
 ### Download manually
diff --git a/examples/with-emotion-11/package.json b/examples/with-emotion-11/package.json
index e231a1e248df5fa..b3faae9168cc3c2 100644
--- a/examples/with-emotion-11/package.json
+++ b/examples/with-emotion-11/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "with-emotion-fiber",
+  "name": "with-emotion-11",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
diff --git a/examples/with-emotion-11/pages/_app.js b/examples/with-emotion-11/pages/_app.js
index 2a53b0890a54f95..8db2357327eb9c1 100644
--- a/examples/with-emotion-11/pages/_app.js
+++ b/examples/with-emotion-11/pages/_app.js
@@ -4,7 +4,6 @@ import { CacheProvider } from '@emotion/react'
 import { cache } from '@emotion/css'
 import { globalStyles } from '../shared/styles'
 
-
 export default class App extends NextApp {
   render() {
     const { Component, pageProps } = this.props

From b1c47596e1ca991905b1e7a9ef286d3c6fa2409f Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Mon, 20 Jan 2020 16:21:15 -0500
Subject: [PATCH 4/4] fix readmes

---
 examples/with-emotion-10/README.md | 23 ++++++++++-------------
 examples/with-emotion-11/README.md | 19 +++++++------------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/examples/with-emotion-10/README.md b/examples/with-emotion-10/README.md
index 27e16ab461f4469..d26d7af368b3384 100644
--- a/examples/with-emotion-10/README.md
+++ b/examples/with-emotion-10/README.md
@@ -1,5 +1,11 @@
 # Pass Server Data Directly to a Next.js Page during SSR
 
+Extract and inline critical css with
+[emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion),
+[emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server),
+[@emotion/core](https://github.com/emotion-js/emotion/tree/master/packages/core),
+and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
+
 ## Deploy your own
 
 Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
 
 ### Using `create-next-app`
 
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-emotion-10 with-emotion-10-app
+npm init next-app --example with-emotion-10 with-emotion-10-app
 # or
 yarn create next-app --example with-emotion-10 with-emotion-10-app
 ```
@@ -23,8 +29,8 @@ yarn create next-app --example with-emotion-10 with-emotion-10-app
 Download the example:
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-fiber
-cd with-emotion-fiber
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-10
+cd with-emotion-10
 ```
 
 Install it and run:
@@ -42,12 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
 ```bash
 now
 ```
-
-## The idea behind the example
-
-Extract and inline critical css with:
-
-- [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion)
-- [emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server)
-- [@emotion/core](https://github.com/emotion-js/emotion/tree/master/packages/core)
-- [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled)
diff --git a/examples/with-emotion-11/README.md b/examples/with-emotion-11/README.md
index 9424b9811059bd8..f7cce4726caaa0d 100644
--- a/examples/with-emotion-11/README.md
+++ b/examples/with-emotion-11/README.md
@@ -1,19 +1,21 @@
 # Pass Server Data Directly to a Next.js Page during SSR
 
+Extract and inline critical css with [@emotion/react](https://www.npmjs.com/package/@emotion/react) and [@emotion/styled](https://www.npmjs.com/package/@emotion/styled)
+
 ## Deploy your own
 
 Deploy the example using [ZEIT Now](https://zeit.co/now):
 
-[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-10)
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-11)
 
 ## How to use
 
 ### Using `create-next-app`
 
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-emotion-11 with-emotion-11-app
+npm init next-app --example with-emotion-11 with-emotion-11-app
 # or
 yarn create next-app --example with-emotion-11 with-emotion-11-app
 ```
@@ -23,8 +25,8 @@ yarn create next-app --example with-emotion-11 with-emotion-11-app
 Download the example:
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-fiber
-cd with-emotion-fiber
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-11
+cd with-emotion-11
 ```
 
 Install it and run:
@@ -42,10 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
 ```bash
 now
 ```
-
-## The idea behind the example
-
-Extract and inline critical css with:
-
-- [@emotion/react](https://www.npmjs.com/package/@emotion/react)
-- [@emotion/styled](https://www.npmjs.com/package/@emotion/styled)