Upgrade Emotion example to React 17 and Emotion 11 and use automatic JSX runtime

examples/with-emotion/.babelrc

@@ -1,3 +1,14 @@
 {
-  "presets": ["next/babel", "@emotion/babel-preset-css-prop"]
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
 }

examples/with-emotion/README.md

@@ -1,4 +1,4 @@
-# Pass Server Data Directly to a Next.js Page during SSR
+# Emotion Example
 
 Extract and inline critical css with
 [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion),

examples/with-emotion/package.json

@@ -1,24 +1,20 @@
 {
   "name": "with-emotion",
   "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
   },
-  "keywords": [],
-  "author": "Thomas Greco",
   "license": "MIT",
   "devDependencies": {
-    "@emotion/babel-preset-css-prop": "10.0.27"
+    "@emotion/babel-plugin": "11.0.0"
   },
   "dependencies": {
-    "@emotion/core": "10.0.35",
-    "@emotion/styled": "10.0.27",
+    "@emotion/react": "11.1.1",
+    "@emotion/styled": "11.0.0",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }

examples/with-emotion/shared/styles.js

@@ -1,4 +1,4 @@
-import { css, Global, keyframes } from '@emotion/core'
+import { css, Global, keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
 
 export const globalStyles = (