Add [with-storybook] example (#4588)

The purpose of the PR is to add the simplest possible integration with Storybook. 

It leaves the default Storybook and also adds a custom component to show how it would be used in both the app and Storybook.

Update: 
Tested with latest 👉  6.1.1

examples/with-storybook/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'

examples/with-storybook/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react'
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/)
+function loadStories () {
+  req.keys().forEach(filename => req(filename))
+}
+
+configure(loadStories, module)

examples/with-storybook/README.md

@@ -0,0 +1,65 @@
+[![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-storybook)
+
+# Example app with Storybook
+
+## 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-storybook with-storybook-app
+# or
+yarn create next-app --example with-storybook with-storybook-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-storybook
+cd with-storybook
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+## Run Storybook
+
+```bash
+npm run storybook
+# or
+yarn storybook
+```
+
+## Build Static Storybook
+
+```bash
+npm run build-storybook
+# or
+yarn build-storybook
+```
+
+Deploy Storybook to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+npm run build-storybook
+# or
+yarn build-storybook
+# then
+cd storybook-static
+now
+```
+
+## The idea behind the example
+
+This example shows a default set up of Storybook. Also included in the example is a custom component included in both Storybook and the Next.js application.

examples/with-storybook/components/index.js

@@ -0,0 +1,2 @@
+import React from 'react'
+export default () => <div>Hello World</div>

examples/with-storybook/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "with-storybook",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC",
+  "devDependencies": {
+    "@storybook/react": "^3.4.7",
+    "@storybook/addon-actions": "^3.4.7",
+    "@storybook/addon-links": "^3.4.7",
+    "@storybook/addons": "^3.4.7",
+    "babel-core": "^6.26.3",
+    "babel-runtime": "^6.26.0"
+  }
+}

examples/with-storybook/pages/index.js

@@ -0,0 +1,7 @@
+import HelloWorld from '../components'
+export default () => (
+  <div>
+    <h1>Simple Storybook Example</h1>
+    <HelloWorld />
+  </div>
+)

examples/with-storybook/stories/index.stories.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { linkTo } from '@storybook/addon-links'
+
+import { Button, Welcome } from '@storybook/react/demo'
+import HelloWorld from '../components'
+
+storiesOf('Welcome', module).add('to Storybook', () => (
+  <Welcome showApp={linkTo('Button')} />
+))
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role='img' aria-label='so cool'>
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ))
+
+storiesOf('HelloWorld', module).add('simple component', () => <HelloWorld />)