Merge branch 'canary'

# Conflicts:
#	examples/with-markdown/readme.md
#	lib/page-loader.js
#	package.json
#	server/build/plugins/pages-plugin.js

.travis.yml

@@ -10,7 +10,7 @@
   language: "node_js",
   node_js: ["6"],
   cache: {
-    directories: ["node-modules"]
+    directories: ["node_modules"]
   },
   before_install: [
     "rm yarn.lock",
@@ -22,6 +22,7 @@
   deploy: {
     provider: "npm",
     email: "leo@zeit.co",
+    tag: "canary",
     api_key: {
       secure:
         "br9gLncKeLSoL7iOq0PXFeD1Gp3jRI8QMCSNIrGdZg/MuLeuwYPv36kmMgf7aGIfpjFLtU2/eVrOHSB+T5g1nKgOsqmWsfZE1tQYWph0//ookd/sj+IyxIx8nVLbUV/C4ctYOhX/efotRgNn56w5Av5hWc1IQLmW9mSN8ijrQnM+GzRI8QitiofeY2EP3N1eO8vC8E2oGkOsAdcypiX6lFG908zyWt7X2SD+iOsK2eAHjxoAEUdrxE5a8gTDhcTH6qnmtBs9rCeEKbO3JZjEy5dvccxlX3Nd+2GC1rckayk6o5L/zveTilsUx6Auqqbwn1dT5ffQuYsV4RPofs8IMrhnizc8y+OfUcCCpBJ4ia4w7N8FEP56TnRNTFoFBGJL5Y6NfeT0HHAlClxUWMG9pRGWGN+sskODDQ9FEntGZoqwV396ogs+3YhkxbY0AIr84QOctflsFcPtOgr/CoBeOsjbB+o9+Rlsqwlf3u3B7qhtU9eV6KcMfK4x9qW+2cwTllK+gD8S9wILx5BChkfx99g/7u/Rg1PCym64tTsDOBtqTVC2YCqeYYvjmpw4Vl3ofLrFsoNQnbmb6Q5+JSpOcJ/bEj7P/FuZdlU0fNV28tFhElu5caKhSCJz/avUlXG7NeveW1Ee8gjhURC4V/l4ryacyjA2vcDY/4RRkWtHNr4="

bin/next

@@ -27,13 +27,18 @@ const commands = new Set([
 ])
 
 let cmd = process.argv[2]
-let args
+let args = []
+let nodeArgs = []
 
 if (new Set(['--version', '-v']).has(cmd)) {
   console.log(`next.js v${pkg.version}`)
   process.exit(0)
 }
 
+if (new Set(process.argv).has('--inspect')) {
+  nodeArgs.push('--inspect')
+}
+
 if (new Set(['--help', '-h']).has(cmd)) {
   console.log(`
     Usage
@@ -61,7 +66,7 @@ process.env.NODE_ENV = process.env.NODE_ENV || defaultEnv
 const bin = join(__dirname, 'next-' + cmd)
 
 const startProcess = () => {
-  const proc = spawn(bin, args, { stdio: 'inherit', customFds: [0, 1, 2] })
+  const proc = spawn('node', [...nodeArgs, ...[bin], ...args], { stdio: 'inherit', customFds: [0, 1, 2] })
   proc.on('close', (code, signal) => {
     if (code !== null) {
       process.exit(code)

errors/build-dir-not-writeable.md

@@ -0,0 +1,30 @@
+# Build directory not writeable
+
+#### Why This Error Occurred
+
+The filesystem does not allow writing to the specified directory. A common cause for this error is starting a [custom server](https://github.com/zeit/next.js#custom-server-and-routing) in development mode on a production server, for example, [now.sh](https://zeit.co) which [doesn't allow you to write to the filesystem after your app is built](https://zeit.co/docs/deployment-types/node#file-system-specifications).
+
+#### Possible Ways to Fix It
+
+When using a custom server with a server file, for example called `server.js`, make sure you update the scripts key in `package.json` to:
+
+```json
+{
+  "scripts": {
+    "dev": "node server.js",
+    "build": "next build",
+    "start": "NODE_ENV=production node server.js"
+  }
+}
+```
+
+and the custom server starts Next in production mode when `NODE_ENV` is `production`
+
+```js
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+```
+
+### Useful Links
+
+- [Custom Server documentation + examples](https://github.com/zeit/next.js#custom-server-and-routing)

examples/active-class-name/README.md

@@ -0,0 +1,40 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/active-class-name)
+
+# activeClassName example
+
+## How to use
+
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example active-class-name active-class-name-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/active-class-name
+cd active-class-name
+```
+
+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
+
+ReactRouter has a convenience property on the `Link` element to allow an author to set the _active_ className on a link. This example replicates that functionality using Next's own `Link`.

examples/active-class-name/components/Link.js

@@ -0,0 +1,18 @@
+import { withRouter } from 'next/router'
+import Link from 'next/link'
+import React, { Children } from 'react'
+
+const ActiveLink = ({ router, children, ...props }) => {
+  const child = Children.only(children)
+
+  let className = child.props.className || ''
+  if (router.pathname === props.href && props.activeClassName) {
+    className = `${className} ${props.activeClassName}`.trim()
+  }
+
+  delete props.activeClassName
+
+  return <Link {...props}>{React.cloneElement(child, { className })}</Link>
+}
+
+export default withRouter(ActiveLink)

examples/active-class-name/components/Nav.js

@@ -0,0 +1,30 @@
+import Link from './Link'
+
+export default () => (
+  <nav>
+    <style jsx>{`
+      .active:after {
+        content: ' (current page)';
+      }
+
+      .nav-link {
+        text-decoration: none;
+        padding: 10px;
+        display: block;
+      }
+    `}</style>
+
+    <ul>
+      <li>
+        <Link activeClassName='active' href='/'>
+          <a className='nav-link home-link'>Home</a>
+        </Link>
+      </li>
+      <li>
+        <Link activeClassName='active' href='/about'>
+          <a className='nav-link'>About</a>
+        </Link>
+      </li>
+    </ul>
+  </nav>
+)

examples/active-class-name/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "active-class-name",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "author": "Remy Sharp <remy@leftlogic.com>",
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}

examples/active-class-name/pages/about.js

@@ -0,0 +1,8 @@
+import Nav from '../components/Nav'
+
+export default () => (
+  <div>
+    <Nav />
+    <p>Hello, I'm About.js</p>
+  </div>
+)

examples/active-class-name/pages/index.js

@@ -0,0 +1,8 @@
+import Nav from '../components/Nav'
+
+export default () => (
+  <div>
+    <Nav />
+    <p>Hello, I'm the home page</p>
+  </div>
+)

examples/basic-css/README.md

@@ -4,10 +4,21 @@
 
 ## How to use
 
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example basic-css basic-css-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/master | tar -xz --strip=2 next.js-master/examples/basic-css
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/basic-css
 cd basic-css
 ```
 

examples/custom-server-express/README.md

@@ -4,10 +4,21 @@
 
 ## How to use
 
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example custom-server-express custom-server-express-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/master | tar -xz --strip=2 next.js-master/examples/custom-server-express
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/custom-server-express
 cd custom-server-express
 ```
 

examples/custom-server-express/pages/index.js

@@ -5,5 +5,6 @@ export default () => (
   <ul>
     <li><Link href='/b' as='/a'><a>a</a></Link></li>
     <li><Link href='/a' as='/b'><a>b</a></Link></li>
+    <li><Link href='/posts/2'><a>post #2</a></Link></li>
   </ul>
 )

examples/custom-server-express/pages/posts.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+export default class extends Component {
+  static getInitialProps ({ query: { id } }) {
+    return { postId: id }
+  }
+
+  render () {
+    return <div>
+      <h1>My blog post #{this.props.postId}</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  }
+}

examples/custom-server-express/server.js

@@ -18,6 +18,10 @@ app.prepare()
     return app.render(req, res, '/a', req.query)
   })
 
+  server.get('/posts/:id', (req, res) => {
+    return app.render(req, res, '/posts', { id: req.params.id })
+  })
+
   server.get('*', (req, res) => {
     return handle(req, res)
   })

examples/custom-server-fastify/README.md

@@ -4,10 +4,21 @@
 
 ## How to use
 
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example custom-server-fastify custom-server-fastify-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/master | tar -xz --strip=2 next.js-master/examples/custom-server-fastify
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/custom-server-fastify
 cd custom-server-fastify
 ```
 

examples/custom-server-hapi/README.md

@@ -4,10 +4,21 @@
 
 ## How to use
 
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example custom-server-hapi custom-server-hapi-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/master | tar -xz --strip=2 next.js-master/examples/custom-server-hapi
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/custom-server-hapi
 cd custom-server-hapi
 ```
 

examples/custom-server-hapi/next-wrapper.js

@@ -1,13 +1,19 @@
-const pathWrapper = (app, pathName, opts) => ({ raw, query }, hapiReply) =>
-app.renderToHTML(raw.req, raw.res, pathName, query, opts)
-.then(hapiReply)
+const { parse } = require('url')
 
-const defaultHandlerWrapper = app => {
+const nextHandlerWrapper = app => {
   const handler = app.getRequestHandler()
-  return ({ raw, url }, hapiReply) =>
-    handler(raw.req, raw.res, url)
-      .then(() => {
-        hapiReply.close(false)
-      })
+  return async ({ raw, url }, h) => {
+    await handler(raw.req, raw.res, url)
+    return h.close
+  }
 }
-module.exports = { pathWrapper, defaultHandlerWrapper }
+const defaultHandlerWrapper = app => async ({ raw: { req, res }, url }) => {
+  const { pathname, query } = parse(url, true)
+  return app.renderToHTML(req, res, pathname, query)
+}
+
+const pathWrapper = (app, pathName, opts) => async ({ raw, query, params }) => {
+  return app.renderToHTML(raw.req, raw.res, pathName, { ...query, ...params }, opts)
+}
+
+module.exports = { pathWrapper, defaultHandlerWrapper, nextHandlerWrapper }

examples/custom-server-hapi/package.json

@@ -7,11 +7,9 @@
     "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {
-    "hapi": "^16.1.0",
+    "hapi": "^17.1.1",
     "next": "latest",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "good": "^7.1.0",
-    "good-console": "^6.2.0"
+    "react-dom": "^16.0.0"
   }
 }