diff --git a/examples/with-emotion/package.json b/examples/with-emotion/package.json
index de612020..54ce5f15 100644
--- a/examples/with-emotion/package.json
+++ b/examples/with-emotion/package.json
@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "emotion": "^4.1.2",
+    "emotion": "^5.0.0",
     "next": "^2.4.6",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"
diff --git a/examples/with-emotion/pages/_document.js b/examples/with-emotion/pages/_document.js
index fca8bd5e..5a6f5123 100644
--- a/examples/with-emotion/pages/_document.js
+++ b/examples/with-emotion/pages/_document.js
@@ -1,10 +1,10 @@
 import Document, { Head, Main, NextScript } from 'next/document'
-import { renderStaticOptimized } from 'emotion/server'
+import { extractCritical } from 'emotion/server'
 
 export default class MyDocument extends Document {
   static getInitialProps ({ renderPage }) {
     const page = renderPage()
-    const styles = renderStaticOptimized(() => page.html)
+    const styles = extractCritical(page.html)
     return { ...page, ...styles }
   }
 
diff --git a/examples/with-emotion/pages/index.js b/examples/with-emotion/pages/index.js
index 584d2352..f83839d2 100644
--- a/examples/with-emotion/pages/index.js
+++ b/examples/with-emotion/pages/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { hydrate, keyframes, fragment, injectGlobal } from 'emotion'
-import styled from 'emotion/styled'
+import styled from 'emotion/react'
 
 // Adds server generated styles to emotion cache.
 // '__NEXT_DATA__.ids' is set in '_document.js'
@@ -69,15 +69,11 @@ export default () => {
 
   return (
     <div>
-      <Basic>
-        Cool Styles
-      </Basic>
+      <Basic>Cool Styles</Basic>
       <Combined>
         With <code>:hover</code>.
       </Combined>
-      <Animated animation={bounce}>
-        Let's bounce.
-      </Animated>
+      <Animated animation={bounce}>Let's bounce.</Animated>
     </div>
   )
 }