diff --git a/examples/with-portals/README.md b/examples/with-portals/README.md
new file mode 100644
index 00000000..a998b6f0
--- /dev/null
+++ b/examples/with-portals/README.md
@@ -0,0 +1,27 @@
+# Example with portals
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-portals
+cd with-portals
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run 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 show how to use the React [Portals](https://reactjs.org/docs/portals.html) feature with Next.js.
diff --git a/examples/with-portals/components/modal.js b/examples/with-portals/components/modal.js
new file mode 100644
index 00000000..9019adfc
--- /dev/null
+++ b/examples/with-portals/components/modal.js
@@ -0,0 +1,50 @@
+import { Component } from 'react'
+import { createPortal } from 'react-dom'
+
+export default class extends Component {
+ componentWillMount () {
+ // get the mount point, is because of this why the modal
+ // can't be used server side, we need access to the DOM
+ this.modalRoot = document.getElementById('modal')
+ }
+
+ render () {
+ const { title, children } = this.props
+
+ return createPortal(
+
+
+
{title}
+ {children}
+
+
+
+
,
+ this.modalRoot
+ )
+ }
+}
diff --git a/examples/with-portals/package.json b/examples/with-portals/package.json
new file mode 100644
index 00000000..4c6c6a4d
--- /dev/null
+++ b/examples/with-portals/package.json
@@ -0,0 +1,12 @@
+{
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "next": "^4.1.4",
+ "react": "^16.2.0",
+ "react-dom": "^16.2.0"
+ }
+}
diff --git a/examples/with-portals/pages/_document.js b/examples/with-portals/pages/_document.js
new file mode 100644
index 00000000..25829288
--- /dev/null
+++ b/examples/with-portals/pages/_document.js
@@ -0,0 +1,17 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class extends Document {
+ render () {
+ return (
+
+
+
+ {/* here we will mount our modal portal */}
+
+
+
+
+ )
+ }
+}
diff --git a/examples/with-portals/pages/index.js b/examples/with-portals/pages/index.js
new file mode 100644
index 00000000..bab3b9bf
--- /dev/null
+++ b/examples/with-portals/pages/index.js
@@ -0,0 +1,31 @@
+import { Component } from 'react'
+import dynamic from 'next/dynamic'
+
+// we import and render the modal only client side (because we need a DOM)
+const Modal = dynamic(import('../components/modal'), {
+ ssr: false
+})
+
+export default class extends Component {
+ state = { modal: false };
+
+ toggleModal = () => this.setState(state => ({ modal: !state.modal }))
+
+ render () {
+ return (
+
+
+ {this.state.modal && (
+
+