diff --git a/examples/with-kea/README.md b/examples/with-kea/README.md
index cfb3e36766601..27e74880caaad 100644
--- a/examples/with-kea/README.md
+++ b/examples/with-kea/README.md
@@ -2,6 +2,12 @@
This example uses [kea](https://github.com/keajs/kea).
+## 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-kea)
+
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-kea/package.json b/examples/with-kea/package.json
index 52d0152868994..589e42f6655db 100644
--- a/examples/with-kea/package.json
+++ b/examples/with-kea/package.json
@@ -19,6 +19,7 @@
},
"license": "MIT",
"devDependencies": {
+ "@babel/core": "7.14.5",
"@babel/plugin-proposal-decorators": "^7.1.0"
},
"babel": {
diff --git a/examples/with-mobx-react-lite/README.md b/examples/with-mobx-react-lite/README.md
index 3ba0f7da966f3..becd04bf4300f 100644
--- a/examples/with-mobx-react-lite/README.md
+++ b/examples/with-mobx-react-lite/README.md
@@ -16,6 +16,12 @@ StoreProvider.js component is used to instantiate the `Store` both on the server
Both components are using a custom hook `useStore` to pull in the `Store` from the provider.
+## 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-mobx-react-lite)
+
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-mobx-react-lite/package.json b/examples/with-mobx-react-lite/package.json
index 5ca4d9fa2085c..ef91d901154b6 100644
--- a/examples/with-mobx-react-lite/package.json
+++ b/examples/with-mobx-react-lite/package.json
@@ -14,6 +14,7 @@
"react-dom": "^17.0.1"
},
"devDependencies": {
+ "@babel/core": "7.14.5",
"@babel/plugin-proposal-class-properties": "^7.1.0"
},
"license": "MIT"
diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md
index a81246eda93ef..f6b4edf79b86e 100644
--- a/examples/with-mobx-state-tree/README.md
+++ b/examples/with-mobx-state-tree/README.md
@@ -10,6 +10,12 @@ The trick here for supporting universal mobx is to separate the cases for the cl
The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree.
+## 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-mobx-state-tree)
+
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-mobx-state-tree/package.json b/examples/with-mobx-state-tree/package.json
index b029fa813c445..676205c387eda 100644
--- a/examples/with-mobx-state-tree/package.json
+++ b/examples/with-mobx-state-tree/package.json
@@ -15,6 +15,7 @@
"react-dom": "^16.7.0"
},
"devDependencies": {
+ "@babel/core": "7.14.5",
"@babel/plugin-proposal-decorators": "^7.1.2"
},
"license": "MIT"
diff --git a/examples/with-mobx/README.md b/examples/with-mobx/README.md
index fcd4b8934385f..334358ccd4f59 100644
--- a/examples/with-mobx/README.md
+++ b/examples/with-mobx/README.md
@@ -10,6 +10,12 @@ The trick here for supporting universal mobx is to separate the cases for the cl
The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree.
+## 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-mobx)
+
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-mobx/package.json b/examples/with-mobx/package.json
index c00b6db45e790..d25e180238bf4 100644
--- a/examples/with-mobx/package.json
+++ b/examples/with-mobx/package.json
@@ -15,6 +15,7 @@
},
"license": "MIT",
"devDependencies": {
+ "@babel/core": "7.14.5",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.0"
}
diff --git a/examples/with-monaco-editor/.gitignore b/examples/with-monaco-editor/.gitignore
deleted file mode 100644
index 1437c53f70bc2..0000000000000
--- a/examples/with-monaco-editor/.gitignore
+++ /dev/null
@@ -1,34 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel
diff --git a/examples/with-monaco-editor/README.md b/examples/with-monaco-editor/README.md
deleted file mode 100644
index a6c70550d471f..0000000000000
--- a/examples/with-monaco-editor/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Example app with Monaco Editor
-
-This example adds support for [Monaco Editor](https://github.com/Microsoft/monaco-editor) integration using the
-[`react-monaco-editor`](https://github.com/react-monaco-editor/react-monaco-editor) library.
-
-## 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/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-monaco-editor&project-name=with-monaco-editor&repository-name=with-monaco-editor)
-
-## 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) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-monaco-editor with-monaco-editor-app
-# or
-yarn create next-app --example with-monaco-editor with-monaco-editor-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-monaco-editor/code-sample.js b/examples/with-monaco-editor/code-sample.js
deleted file mode 100644
index 0cf7a150ab36e..0000000000000
--- a/examples/with-monaco-editor/code-sample.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export default `class Animal {
- constructor(public name: string) { }
- move(meters: number) {
- console.log(this.name + " moved " + meters + "m.");
- }
-}
-
-class Snake extends Animal {
- move() {
- console.log("Slithering...");
- super.move(5);
- }
-}
-
-class Horse extends Animal {
- move() {
- console.log("Galloping...");
- super.move(45);
- }
-}
-
-var sam = new Snake("Sammy the Python")
-var tom: Animal = new Horse("Tommy the Palomino")
-
-sam.move()
-tom.move(34)`
diff --git a/examples/with-monaco-editor/next.config.js b/examples/with-monaco-editor/next.config.js
deleted file mode 100644
index f012e6d9c6c74..0000000000000
--- a/examples/with-monaco-editor/next.config.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const withCSS = require('@zeit/next-css')
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
-
-module.exports = withCSS({
- webpack: (config) => {
- config.module.rules.push({
- test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
- use: {
- loader: 'url-loader',
- options: {
- limit: 100000,
- },
- },
- })
-
- config.plugins.push(
- new MonacoWebpackPlugin({
- // Add languages as needed...
- languages: ['javascript', 'typescript'],
- filename: 'static/[name].worker.js',
- })
- )
-
- return config
- },
-})
diff --git a/examples/with-monaco-editor/package.json b/examples/with-monaco-editor/package.json
deleted file mode 100644
index ca52a0f910193..0000000000000
--- a/examples/with-monaco-editor/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "name": "with-monaco-editor",
- "version": "0.1.0",
- "private": true,
- "scripts": {
- "dev": "next dev",
- "build": "next build",
- "start": "next start"
- },
- "dependencies": {
- "@zeit/next-css": "^1.0.1",
- "monaco-editor": "^0.20.0",
- "monaco-editor-webpack-plugin": "^1.9.0",
- "next": "9.3.1",
- "next-fonts": "^1.0.3",
- "react": "16.13.1",
- "react-dom": "16.13.1",
- "react-monaco-editor": "^0.34.0"
- },
- "license": "MIT"
-}
diff --git a/examples/with-monaco-editor/pages/index.js b/examples/with-monaco-editor/pages/index.js
deleted file mode 100644
index e2642e35347bc..0000000000000
--- a/examples/with-monaco-editor/pages/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import dynamic from 'next/dynamic'
-
-import sample from '../code-sample'
-
-const MonacoEditor = dynamic(import('react-monaco-editor'), { ssr: false })
-
-function IndexPage() {
- return (
-