diff --git a/examples/with-mdx/README.md b/examples/with-mdx/README.md
new file mode 100644
index 00000000..95739d55
--- /dev/null
+++ b/examples/with-mdx/README.md
@@ -0,0 +1,45 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-mdx)
+
+# Example app with MDX
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/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-mdx with-mdx-app
+# or
+yarn create next-app --example with-mdx with-mdx-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-mdx
+cd with-mdx
+```
+
+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
+
+This example shows using [MDX](https://github.com/mdx-js/mdx) as top level pages
+for your next.js app.
diff --git a/examples/with-mdx/components/button.js b/examples/with-mdx/components/button.js
new file mode 100644
index 00000000..035fbf70
--- /dev/null
+++ b/examples/with-mdx/components/button.js
@@ -0,0 +1,12 @@
+export default ({ children }) => (
+  <button style={{
+    borderRadius: '3px',
+    border: '1px solid black',
+    color: 'black',
+    padding: '0.5em 1em',
+    cursor: 'pointer',
+    fontSize: '1.1em'
+  }}>
+    {children}
+  </button>
+)
diff --git a/examples/with-mdx/next.config.js b/examples/with-mdx/next.config.js
new file mode 100644
index 00000000..ef57d190
--- /dev/null
+++ b/examples/with-mdx/next.config.js
@@ -0,0 +1,6 @@
+const withMDX = require('@zeit/next-mdx')({
+  extension: /\.mdx?$/
+})
+module.exports = withMDX({
+  pageExtensions: ['js', 'jsx', 'mdx']
+})
diff --git a/examples/with-mdx/package.json b/examples/with-mdx/package.json
new file mode 100644
index 00000000..2c546ec7
--- /dev/null
+++ b/examples/with-mdx/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "with-mdx",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "0.16.5",
+    "@zeit/next-mdx": "1.2.0",
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "devDependencies": {},
+  "license": "ISC"
+}
diff --git a/examples/with-mdx/pages/index.mdx b/examples/with-mdx/pages/index.mdx
new file mode 100644
index 00000000..ebd48dbe
--- /dev/null
+++ b/examples/with-mdx/pages/index.mdx
@@ -0,0 +1,7 @@
+import Button from '../components/button.js'
+
+# MDX + Next.js
+
+Look, a button! 👇
+
+<Button>👋 Hello</Button>