Merge branch 'canary'

.gitignore

@@ -5,6 +5,7 @@ dist
 # dependencies
 node_modules
 package-lock.json
+test/node_modules
 
 # logs
 *.log

.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="

asset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/lib/asset')

bin/next

@@ -1,10 +1,7 @@
 #!/usr/bin/env node
-
-import { join, resolve } from 'path'
+import { join } from 'path'
 import { spawn } from 'cross-spawn'
-import { watchFile } from 'fs'
 import pkg from '../../package.json'
-import getConfig from '../server/config'
 
 if (pkg.peerDependencies) {
   Object.keys(pkg.peerDependencies).forEach(dependency => {
@@ -27,13 +24,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 +63,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)
@@ -83,10 +85,10 @@ const startProcess = () => {
 }
 
 let proc = startProcess()
-const { pagesDirectory = resolve(process.cwd(), 'pages') } = getConfig(process.cwd())
 
 if (cmd === 'dev') {
-  watchFile(`${resolve(pagesDirectory, '..')}/next.config.js`, (cur, prev) => {
+  const {watchFile} = require('fs')
+  watchFile(`${process.cwd()}/next.config.js`, (cur, prev) => {
     if (cur.size > 0 || prev.size > 0) {
       console.log('\n> Found a change in next.config.js, restarting the server...')
       // Don't listen to 'close' now since otherwise parent gets killed by listener

bin/next-dev

@@ -1,11 +1,9 @@
 #!/usr/bin/env node
-import 'source-map-support/register'
 import { resolve, join } from 'path'
 import parseArgs from 'minimist'
 import { existsSync, readFileSync } from 'fs'
 import Server from '../server'
 import { printAndExit } from '../lib/utils'
-import pkgUp from 'pkg-up'
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -64,7 +62,7 @@ srv.start(argv.port, argv.hostname)
 .catch((err) => {
   if (err.code === 'EADDRINUSE') {
     let errorMessage = `Port ${argv.port} is already in use.`
-    const pkgAppPath = pkgUp.sync('.')
+    const pkgAppPath = require('pkg-up').sync('.')
     const appPackage = JSON.parse(readFileSync(pkgAppPath, 'utf8'))
     const nextScript = Object.entries(appPackage.scripts).find(scriptLine => scriptLine[1] === 'next')
     if (nextScript) errorMessage += `\nUse \`npm run ${nextScript[0]} -- -p <some other port>\`.`

client/index.js

@@ -6,6 +6,7 @@ import EventEmitter from '../lib/EventEmitter'
 import App from '../lib/app'
 import { loadGetInitialProps, getURL } from '../lib/utils'
 import PageLoader from '../lib/page-loader'
+import * as asset from '../lib/asset'
 
 // Polyfill Promise globally
 // This is needed because Webpack2's dynamic loading(common chunks) code
@@ -29,6 +30,12 @@ const {
   location
 } = window
 
+// With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
+// So, this is how we do it in the client side at runtime
+__webpack_public_path__ = `${assetPrefix}/_next/webpack/` //eslint-disable-line
+// Initialize next/asset with the assetPrefix
+asset.setAssetPrefix(assetPrefix)
+
 const asPath = getURL()
 
 const pageLoader = new PageLoader(buildId, assetPrefix)
@@ -93,10 +100,7 @@ export default async ({ ErrorDebugComponent: passedDebugComponent, stripAnsi: pa
 }
 
 export async function render (props) {
-  // There are some errors we should ignore.
-  // Next.js rendering logic knows how to handle them.
-  // These are specially 404 errors
-  if (props.err && !props.err.ignore) {
+  if (props.err) {
     await renderError(props.err)
     return
   }
@@ -159,7 +163,8 @@ async function doRender ({ Component, props, hash, err, emitter: emitterProp = e
 
 let isInitialRender = true
 function renderReactElement (reactEl, domEl) {
-  if (isInitialRender) {
+  // The check for `.hydrate` is there to support React alternatives like preact
+  if (isInitialRender && typeof ReactDOM.hydrate === 'function') {
     ReactDOM.hydrate(reactEl, domEl)
     isInitialRender = false
   } else {

client/next-dev.js

@@ -1,10 +1,11 @@
-import 'react-hot-loader/patch'
 import stripAnsi from 'strip-ansi'
 import initNext, * as next from './'
 import ErrorDebugComponent from '../lib/error-debug'
 import initOnDemandEntries from './on-demand-entries-client'
 import initWebpackHMR from './webpack-hot-middleware-client'
 
+require('@zeit/source-map-support/browser-source-map-support')
+
 window.next = next
 
 initNext({ ErrorDebugComponent, stripAnsi })

client/on-demand-entries-client.js

@@ -3,23 +3,29 @@
 import Router from '../lib/router'
 import fetch from 'unfetch'
 
+const {
+  __NEXT_DATA__: {
+    assetPrefix
+  }
+} = window
+
 export default () => {
   Router.ready(() => {
     Router.router.events.on('routeChangeComplete', ping)
   })
 
   async function ping () {
     try {
-      const url = `/_next/on-demand-entries-ping?page=${Router.pathname}`
+      const url = `${assetPrefix}/_next/on-demand-entries-ping?page=${Router.pathname}`
       const res = await fetch(url, {
-        credentials: 'same-origin'
+        credentials: 'omit'
       })
       const payload = await res.json()
       if (payload.invalid) {
         // Payload can be invalid even if the page is not exists.
         // So, we need to make sure it's exists before reloading.
         const pageRes = await fetch(location.href, {
-          credentials: 'same-origin'
+          credentials: 'omit'
         })
         if (pageRes.status === 200) {
           location.reload()

client/webpack-hot-middleware-client.js

@@ -1,7 +1,19 @@
-import webpackHotMiddlewareClient from 'webpack-hot-middleware/client?overlay=false&reload=true&path=/_next/webpack-hmr'
+import webpackHotMiddlewareClient from 'webpack-hot-middleware/client?autoConnect=false'
 import Router from '../lib/router'
 
+const {
+  __NEXT_DATA__: {
+    assetPrefix
+  }
+} = window
+
 export default () => {
+  webpackHotMiddlewareClient.setOptionsAndConnect({
+    overlay: false,
+    reload: true,
+    path: `${assetPrefix}/_next/webpack-hmr`
+  })
+
   const handlers = {
     reload (route) {
       if (route === '/_error') {

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)

errors/powered-by-header-option-removed.md

@@ -0,0 +1,15 @@
+# The poweredByHeader has been removed
+
+#### Why This Error Occurred
+
+Starting at Next.js version 5.0.0 the `poweredByHeader` option has been removed.
+
+#### Possible Ways to Fix It
+
+If you still want to remove `x-powered-by` you can use one of the custom-server examples.
+
+And then manually remove the header using `res.removeHeader('x-powered-by')`
+
+### 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>
+)