diff --git a/examples/with-emotion-swc/README.md b/examples/with-emotion-swc/README.md
index a253be53d1..0ee0e7dfec 100644
--- a/examples/with-emotion-swc/README.md
+++ b/examples/with-emotion-swc/README.md
@@ -1,37 +1,3 @@
 # Emotion Example
 
-Extract and inline critical css with
-[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css),
-[@emotion/server](https://github.com/emotion-js/emotion/tree/master/packages/server),
-[@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
-and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
-
-## Preview
-
-Preview the example live on [StackBlitz](http://stackblitz.com/):
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-emotion&project-name=with-emotion&repository-name=with-emotion)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-emotion-swc with-emotion-swc-app
-```
-
-```bash
-yarn create next-app --example with-emotion-swc with-emotion-swc-app
-```
-
-```bash
-pnpm create next-app --example with-emotion-swc with-emotion-swc-app
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+See the [`with-emotion` example](https://github.com/vercel/next.js/tree/canary/examples/with-emotion).
diff --git a/examples/with-emotion-swc/next-env.d.ts b/examples/with-emotion-swc/next-env.d.ts
deleted file mode 100644
index 4f11a03dc6..0000000000
--- a/examples/with-emotion-swc/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/with-emotion-swc/package.json b/examples/with-emotion-swc/package.json
deleted file mode 100644
index 4800e033cf..0000000000
--- a/examples/with-emotion-swc/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "private": true,
-  "scripts": {
-    "dev": "next",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@emotion/react": "11.10.4",
-    "@emotion/styled": "11.10.4",
-    "next": "latest",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "18.0.6",
-    "@types/react": "18.2.8",
-    "@types/react-dom": "18.0.6",
-    "typescript": "^4.7.4"
-  }
-}
diff --git a/examples/with-emotion-vanilla/.babelrc b/examples/with-emotion-vanilla/.babelrc
deleted file mode 100644
index d69237b388..0000000000
--- a/examples/with-emotion-vanilla/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "presets": [["next/babel"]],
-  "plugins": ["@emotion/babel-plugin"]
-}
diff --git a/examples/with-emotion-vanilla/README.md b/examples/with-emotion-vanilla/README.md
index 11a1d98f8b..0ee0e7dfec 100644
--- a/examples/with-emotion-vanilla/README.md
+++ b/examples/with-emotion-vanilla/README.md
@@ -1,30 +1,3 @@
-# Emotion Vanilla Example
+# Emotion 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/server),
-[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css)
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion-vanilla)
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-emotion-vanilla)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-emotion-vanilla with-emotion-vanilla-app
-```
-
-```bash
-yarn create next-app --example with-emotion-vanilla with-emotion-vanilla-app
-```
-
-```bash
-pnpm create next-app --example with-emotion-vanilla with-emotion-vanilla-app
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+See the [`with-emotion` example](https://github.com/vercel/next.js/tree/canary/examples/with-emotion).
diff --git a/examples/with-emotion-vanilla/package.json b/examples/with-emotion-vanilla/package.json
deleted file mode 100644
index ae8ec004d0..0000000000
--- a/examples/with-emotion-vanilla/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "private": true,
-  "scripts": {
-    "dev": "next",
-    "build": "next build",
-    "start": "next start"
-  },
-  "devDependencies": {
-    "@emotion/babel-plugin": "11.10.2"
-  },
-  "dependencies": {
-    "@emotion/css": "11.11.2",
-    "@emotion/server": "11.10.0",
-    "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  }
-}
diff --git a/examples/with-emotion-vanilla/pages/_document.js b/examples/with-emotion-vanilla/pages/_document.js
deleted file mode 100644
index 51ee8584cd..0000000000
--- a/examples/with-emotion-vanilla/pages/_document.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
-import * as React from "react";
-import { renderStatic } from "../shared/renderer";
-export default class AppDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    const { css, ids } = await renderStatic(initialProps.html);
-    return {
-      ...initialProps,
-      styles: (
-        <React.Fragment>
-          {initialProps.styles}
-          <style
-            data-emotion={`css ${ids.join(" ")}`}
-            dangerouslySetInnerHTML={{ __html: css }}
-          />
-        </React.Fragment>
-      ),
-    };
-  }
-
-  render() {
-    return (
-      <Html>
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
diff --git a/examples/with-emotion-vanilla/pages/index.js b/examples/with-emotion-vanilla/pages/index.js
deleted file mode 100644
index 4b48fc6b30..0000000000
--- a/examples/with-emotion-vanilla/pages/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Head from "next/head";
-import {
-  basicStyles,
-  otherStyles,
-  someMoreBasicStyles,
-  someCssAsObject,
-  combinedAsArray,
-  cxExample,
-  keyframesExample,
-} from "../shared/styles";
-
-const Home = () => (
-  <>
-    <Head>
-      <title>Emotion using the vanilla version supporting SSR</title>
-    </Head>
-    <div>
-      <h1>Emotion Vanilla example</h1>
-      <div className={basicStyles}>Basic styles using emotion</div>
-      <div className={otherStyles}>Some more styles using emotion</div>
-      <div className={someMoreBasicStyles}>Well why not here is some more</div>
-      <div className={someCssAsObject}>Object styles using emotion css</div>
-      <div className={combinedAsArray}>Array of styles using emotion css</div>
-      <div className={cxExample}>cx example from emotion</div>
-      <div className={keyframesExample} />
-    </div>
-  </>
-);
-
-export default Home;
diff --git a/examples/with-emotion-vanilla/shared/renderer.js b/examples/with-emotion-vanilla/shared/renderer.js
deleted file mode 100644
index f6157bdaf5..0000000000
--- a/examples/with-emotion-vanilla/shared/renderer.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import createEmotionServer from "@emotion/server/create-instance";
-import { cache } from "@emotion/css";
-
-export const renderStatic = async (html) => {
-  if (html === undefined) {
-    throw new Error("did you forget to return html from renderToString?");
-  }
-  const { extractCritical } = createEmotionServer(cache);
-  const { ids, css } = extractCritical(html);
-
-  return { html, ids, css };
-};
diff --git a/examples/with-emotion-vanilla/shared/styles.js b/examples/with-emotion-vanilla/shared/styles.js
deleted file mode 100644
index 29663b066b..0000000000
--- a/examples/with-emotion-vanilla/shared/styles.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { css, cx, keyframes, injectGlobal } from "@emotion/css";
-
-injectGlobal`
-  * {
-    box-sizing: border-box;
-  }
-  body {
-    background: #DFCFBE;
-    font-family: Helvetica, sans-serif;
-  }
-`;
-
-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;
-`;
-
-const otherStyles = css`
-  background-color: red;
-  padding: 10px;
-  margin-bottom: 10px;
-`;
-
-const someMoreBasicStyles = css`
-  background-color: green;
-  color: white;
-  margin-bottom: 10px;
-  padding: 10px;
-`;
-
-const someCssAsObject = css({
-  background: "orange",
-  color: "white",
-  padding: "10px",
-  marginBottom: "10px",
-});
-
-const combinedAsArray = css([someMoreBasicStyles, someCssAsObject]);
-
-const cls1 = css`
-  font-size: 20px;
-  padding: 5px;
-  background: green;
-  color: orange;
-`;
-const cls2 = css`
-  font-size: 20px;
-  padding: 15px;
-  background: blue;
-  color: white;
-`;
-
-const cxExample = cx(cls1, cls2);
-
-const bounce = keyframes`
-  from, 20%, 53%, 80%, to {
-    transform: translate3d(0,0,0);
-  }
-
-  40%, 43% {
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    transform: translate3d(0,-4px,0);
-  }
-`;
-
-const keyframesExample = css([
-  bounce,
-  css({
-    marginTop: "50px",
-    width: "20px",
-    height: "20px",
-    background: "black",
-    borderRadius: "50%",
-    padding: "20px",
-    animation: `${bounce} 1s ease infinite`,
-    transformOrigin: "center",
-  }),
-]);
-
-export {
-  combinedAsArray,
-  cxExample,
-  keyframesExample,
-  someCssAsObject,
-  someMoreBasicStyles,
-  otherStyles,
-  basicStyles,
-};
diff --git a/examples/with-emotion/.babelrc b/examples/with-emotion/.babelrc
deleted file mode 100644
index 0da40e7b69..0000000000
--- a/examples/with-emotion/.babelrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "presets": [
-    [
-      "next/babel",
-      {
-        "preset-react": {
-          "runtime": "automatic",
-          "importSource": "@emotion/react"
-        }
-      }
-    ]
-  ],
-  "plugins": ["@emotion/babel-plugin"]
-}
diff --git a/examples/with-emotion/README.md b/examples/with-emotion/README.md
index e7d23d772a..a253be53d1 100644
--- a/examples/with-emotion/README.md
+++ b/examples/with-emotion/README.md
@@ -6,9 +6,15 @@ Extract and inline critical css with
 [@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
 and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
 
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
+
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-emotion&project-name=with-emotion&repository-name=with-emotion)
 
@@ -17,15 +23,15 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-emotion with-emotion-app
+npx create-next-app --example with-emotion-swc with-emotion-swc-app
 ```
 
 ```bash
-yarn create next-app --example with-emotion with-emotion-app
+yarn create next-app --example with-emotion-swc with-emotion-swc-app
 ```
 
 ```bash
-pnpm create next-app --example with-emotion with-emotion-app
+pnpm create next-app --example with-emotion-swc with-emotion-swc-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-emotion-swc/next.config.js b/examples/with-emotion/next.config.js
similarity index 100%
rename from examples/with-emotion-swc/next.config.js
rename to examples/with-emotion/next.config.js
diff --git a/examples/with-emotion/package.json b/examples/with-emotion/package.json
index bbc637a117..24b739ba51 100644
--- a/examples/with-emotion/package.json
+++ b/examples/with-emotion/package.json
@@ -5,14 +5,18 @@
     "build": "next build",
     "start": "next start"
   },
-  "devDependencies": {
-    "@emotion/babel-plugin": "11.10.2"
-  },
   "dependencies": {
+    "@emotion/cache": "11.10.4",
     "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.0.6",
+    "@types/react": "18.2.8",
+    "@types/react-dom": "18.0.6",
+    "typescript": "^4.7.4"
   }
 }
diff --git a/examples/with-emotion/pages/_app.js b/examples/with-emotion/pages/_app.js
deleted file mode 100644
index a60ad9b2e1..0000000000
--- a/examples/with-emotion/pages/_app.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { globalStyles } from "../shared/styles";
-
-const App = ({ Component, pageProps }) => (
-  <>
-    {globalStyles}
-    <Component {...pageProps} />
-  </>
-);
-
-export default App;
diff --git a/examples/with-emotion-swc/pages/_app.tsx b/examples/with-emotion/pages/_app.tsx
similarity index 100%
rename from examples/with-emotion-swc/pages/_app.tsx
rename to examples/with-emotion/pages/_app.tsx
diff --git a/examples/with-emotion/pages/index.js b/examples/with-emotion/pages/index.js
deleted file mode 100644
index 4c158e5914..0000000000
--- a/examples/with-emotion/pages/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Animated, Basic, bounce, Combined } 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-swc/pages/index.tsx b/examples/with-emotion/pages/index.tsx
similarity index 100%
rename from examples/with-emotion-swc/pages/index.tsx
rename to examples/with-emotion/pages/index.tsx
diff --git a/examples/with-emotion/shared/styles.js b/examples/with-emotion/shared/styles.js
deleted file mode 100644
index f7a120ca7f..0000000000
--- a/examples/with-emotion/shared/styles.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { css, Global, keyframes } 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: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
-`;
diff --git a/examples/with-emotion-swc/shared/styles.tsx b/examples/with-emotion/shared/styles.tsx
similarity index 100%
rename from examples/with-emotion-swc/shared/styles.tsx
rename to examples/with-emotion/shared/styles.tsx
diff --git a/examples/with-emotion-swc/tsconfig.json b/examples/with-emotion/tsconfig.json
similarity index 100%
rename from examples/with-emotion-swc/tsconfig.json
rename to examples/with-emotion/tsconfig.json