Add with-carlo example (#5930)

This example show how you can use Next.js with [Carlo](https://github.com/GoogleChromeLabs/carlo).

```bash
npm run dev

npm run build
npm start
```

#### Demo

![large gif 582x438](https://user-images.githubusercontent.com/1527371/50331830-0ebd3100-053b-11e9-8d9c-d792ce0065fa.gif)

examples/with-carlo/README.md

@@ -0,0 +1,45 @@
+# Carlo example
+
+## 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-carlo with-carlo-app
+# or
+yarn create next-app --example with-carlo with-carlo-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-carlo
+cd with-carlo
+```
+
+### Development
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+### Build it
+
+```bash
+npm run build
+npm start
+```
+
+## The idea behind the example
+
+This example show how you can use Next.js with [Carlo](https://github.com/GoogleChromeLabs/carlo). Here we use a [Custom server](https://github.com/zeit/next.js/blob/canary/examples/custom-server/README.md) to fit the carlo configs.

examples/with-carlo/carlo.js

@@ -0,0 +1,23 @@
+const carlo = require('carlo')
+
+/**
+ * ref: https://github.com/GoogleChromeLabs/carlo#usage
+ */
+
+module.exports = async url => {
+  // Launch the browser.
+  const app = await carlo.launch()
+
+  // Terminate Node.js process on app window closing.
+  app.on('exit', () => process.exit())
+
+  // Fetch from the next.js server
+  app.serveOrigin(url)
+
+  // Expose functions in the web environment.
+  await app.exposeFunction('env', _ => process.env)
+  await app.exposeFunction('getName', _ => 'next.js')
+
+  // Navigate to the main page of your app.
+  await app.load('/')
+}

examples/with-carlo/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "with-carlo",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "node server.js",
+    "build": "next build",
+    "start": "NODE_ENV=production node server.js"
+  },
+  "dependencies": {
+    "carlo": "0.9.43",
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}

examples/with-carlo/pages/about.js

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import Link from 'next/link'
+
+export default class About extends React.Component {
+  state = { name: '' };
+
+  async componentDidMount () {
+    const name = await window.getName()
+    this.setState({ name })
+  }
+
+  render () {
+    return (
+      <div>
+        <p>About {this.state.name}</p>
+
+        <Link href='/'>
+          <a>back</a>
+        </Link>
+      </div>
+    )
+  }
+}

examples/with-carlo/pages/index.js

@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+export default () => (
+  <div>
+    <p>Hello World</p>
+
+    <Link href='/about'>
+      <a>About</a>
+    </Link>
+  </div>
+)

examples/with-carlo/server.js

@@ -0,0 +1,20 @@
+const { createServer } = require('http')
+const next = require('next')
+const carlo = require('./carlo')
+
+const port = parseInt(process.env.PORT, 10) || 3000
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare().then(async () => {
+  const url = `http://localhost:${port}`
+
+  app.setAssetPrefix(url)
+  createServer(handle).listen(port, err => {
+    if (err) throw err
+    console.log(`> Ready on ${url}`)
+  })
+
+  await carlo(url)
+})