arunoda · arunoda · Feb 9, 2017 · Jan 13, 2017 · Jan 13, 2017 · Jan 13, 2017
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,6 @@
 {
-  "presets": ["es2015", "react"],
+  "presets": ["latest", "react"],
   "plugins": [
-    "transform-async-to-generator",
     "transform-object-rest-spread",
     "transform-class-properties",
     "transform-runtime"

diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,8 @@ npm-debug.log
 # coverage
 .nyc_output
 coverage
+
+# editors
+.idea/*
+*.iml
+*.sublime-*
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,10 @@
+# Contributing to Next.js
+
+Our Commitment to Open Source can be found [here](https://zeit.co/blog/oss)
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+2. Install the dependencies: `npm install`
+3. Run `npm link` to link the local repo to NPM
+4. Run npm run build in a new terminal to build and watch for code changes
+5. Then npm link this repo inside any example app with `npm link next`
+6. Then you can run your example app with the local version of Next.js (You may need to re-run the example app as you change server side code in the Next.js repository)
diff --git a/README.md b/README.md
@@ -6,10 +6,46 @@
 
 Next.js is a minimalistic framework for server-rendered React applications.
 
-**NOTE! the README on the `master` branch might not match that of the [latest stable release](https://github.com/zeit/next.js/releases/latest)! **
+_**NOTE! the README on the `master` branch might not match that of the [latest stable release](https://github.com/zeit/next.js/releases/latest)!**_
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+<!-- https://github.com/thlorenz/doctoc -->
+
+- [How to use](#how-to-use)
+  - [Setup](#setup)
+  - [Automatic code splitting](#automatic-code-splitting)
+  - [CSS](#css)
+    - [Built-in CSS support](#built-in-css-support)
+    - [CSS-in-JS](#css-in-js)
+  - [Static file serving (e.g.: images)](#static-file-serving-eg-images)
+  - [Populating `<head>`](#populating-head)
+  - [Fetching data and component lifecycle](#fetching-data-and-component-lifecycle)
+  - [Routing](#routing)
+    - [With `<Link>`](#with-link)
+    - [Imperatively](#imperatively)
+      - [Router Events](#router-events)
+  - [Prefetching Pages](#prefetching-pages)
+    - [With `<Link>`](#with-link-1)
+    - [Imperatively](#imperatively-1)
+  - [Custom server and routing](#custom-server-and-routing)
+  - [Custom `<Document>`](#custom-document)
+  - [Custom error handling](#custom-error-handling)
+  - [Custom configuration](#custom-configuration)
+  - [Customizing webpack config](#customizing-webpack-config)
+  - [Customizing babel config](#customizing-babel-config)
+- [Production deployment](#production-deployment)
+- [FAQ](#faq)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [Authors](#authors)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## How to use
 
+### Setup
+
 Install it:
 
 ```bash
@@ -21,7 +57,9 @@ and add a script to your package.json like this:
 ```json
 {
   "scripts": {
-    "dev": "next"
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
   }
 }
 ```
@@ -94,8 +132,10 @@ export default () => (
 #### CSS-in-JS
 
 <p><details>
-  <summary><b>Examples</b></summary>
-  <ul><li><a href="./examples/with-styled-components">Styled components</a></li><li><a href="./examples/with-styletron">Styletron</a></li><li><a href="./examples/with-glamor">Glamor</a></li><li><a href="./examples/with-cxs">Cxs</a></li><li><a href="./examples/with-aphrodite">Aphrodite</a></li></ul>
+  <summary>
+    <b>Examples</b>
+    </summary>
+  <ul><li><a href="./examples/with-styled-components">Styled components</a></li><li><a href="./examples/with-styletron">Styletron</a></li><li><a href="./examples/with-glamor">Glamor</a></li><li><a href="./examples/with-cxs">Cxs</a></li><li><a href="./examples/with-aphrodite">Aphrodite</a></li><li><a href="./examples/with-fela">Fela</a></li></ul>
 </details></p>
 
 It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:
@@ -271,7 +311,7 @@ Here's a list of supported events:
 
 > Here `url` is the URL shown in the browser. If you call `Router.push(url, as)` (or similar), then the value of `url` will be `as`.
 
-Here's how to property listen to the router event `routeChangeStart`:
+Here's how to properly listen to the router event `routeChangeStart`:
 
 ```js
 Router.onRouteChangeStart = (url) => {
@@ -327,7 +367,7 @@ export default () => (
 When this higher-level `<Link>` component is first used, the `ServiceWorker` gets installed. To turn off prefetching on a per-`<Link>` basis, you can use the `prefetch` attribute:
 
 ```jsx
-<Link href='/contact' prefetch={false}>Home</Link>
+<Link href='/contact' prefetch={false}><a>Home</a></Link>
 ```
 
 #### Imperatively
@@ -356,6 +396,8 @@ export default ({ url }) => (
   <ul>
     <li><a href="./examples/custom-server">Basic custom server</a></li>
     <li><a href="./examples/custom-server-express">Express integration</a></li>
+    <li><a href="./examples/custom-server-hapi">Hapi integration</a></li>
+    <li><a href="./examples/custom-server-koa">Koa integration</a></li>
     <li><a href="./examples/parameterized-routing">Parameterized routing</a></li>
     <li><a href="./examples/ssr-caching">SSR caching</a></li>
   </ul>
@@ -370,19 +412,21 @@ const { createServer } = require('http')
 const { parse } = require('url')
 const next = require('next')
 
-const app = next({ dev: true })
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
 const handle = app.getRequestHandler()
 
 app.prepare().then(() => {
   createServer((req, res) => {
-    const { pathname, query } = parse(req.url, true)
+    const parsedUrl = parse(req.url, true)
+    const { pathname, query } = parsedUrl
 
     if (pathname === '/a') {
       app.render(req, res, '/b', query)
     } else if (pathname === '/b') {
       app.render(req, res, '/a', query)
     } else {
-      handle(req, res)
+      handle(req, res, parsedUrl)
     }
   })
   .listen(3000, (err) => {
@@ -406,12 +450,14 @@ Supported options:
 <p><details>
   <summary><b>Examples</b></summary>
   <ul><li><a href="./examples/with-styled-components">Styled components custom document</a></li></ul>
+  <ul><li><a href="./examples/with-amp">Google AMP</a></li></ul>
 </details></p>
 
-Pages in `Next.js` skip the definition of the surrounding document's markup. For example, you never include `<html>`, `<body>`, etc. But we still make it possible to override that:
+Pages in `Next.js` skip the definition of the surrounding document's markup. For example, you never include `<html>`, `<body>`, etc. To override that default behavior, you must create a file at `./pages/_document.js`, where you can extend the `Document` class:
 
 ```jsx
-import Document, { Head, Main, NextScript } from `next/document`
+// ./pages/_document.js
+import Document, { Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
   static async getInitialProps (ctx) {
@@ -580,8 +626,7 @@ No in that it enforces a _structure_ so that we can do more advanced things like
 - Automatic code splitting
 
 In addition, Next.js provides two built-in features that are critical for every single website:
-- Routing with lazy component loading: `
->` (by importing `next/link`)
+- Routing with lazy component loading: `<Link>` (by importing `next/link`)
 - A way for components to alter `<head>`: `<Head>` (by importing `next/head`)
 
 If you want to create re-usable React components that you can embed in your Next.js app or other React applications, using `create-react-app` is a great idea. You can later `import` it and keep your codebase clean!
@@ -635,6 +680,13 @@ On the client side, we have a parameter call `as` on `<Link>` that _decorates_ t
 It’s up to you. `getInitialProps` is an `async` function (or a regular function that returns a `Promise`). It can retrieve data from anywhere.
 </details>
 
+<details>
+  <summary>Can I use it with GraphQL?</summary>
+
+Yes! Here's an example with [Apollo](./examples/with-apollo).
+
+</details>
+
 <details>
 <summary>Can I use it with Redux?</summary>
 
@@ -658,6 +710,10 @@ As we were researching options for server-rendering React that didn’t involve
 
 Our Roadmap towards 2.0.0 [is public](https://github.com/zeit/next.js/wiki/Roadmap#nextjs-200).
 
+## Contributing
+
+Please see our [CONTRIBUTING.md](./CONTRIBUTING.md)
+
 ## Authors
 
 - Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) – ▲ZEIT

diff --git a/bin/next b/bin/next
@@ -46,7 +46,19 @@ const bin = join(__dirname, 'next-' + cmd)
 
 const startProcess = () => {
   const proc = spawn(bin, args, { stdio: 'inherit', customFds: [0, 1, 2] })
-  proc.on('close', (code) => process.exit(code))
+  proc.on('close', (code, signal) => {
+    if (code !== null) {
+      process.exit(code)
+    }
+    if (signal) {
+      if (signal === 'SIGKILL') {
+        process.exit(137)
+      }
+      console.log(`got signal ${signal}, exitting`)
+      process.exit(1)
+    }
+    process.exit(0)
+  })
   proc.on('error', (err) => {
     console.error(err)
     process.exit(1)

diff --git a/bin/next-build b/bin/next-build
@@ -1,9 +1,11 @@
 #!/usr/bin/env node
-
 import { resolve, join } from 'path'
-import { exists } from 'mz/fs'
+import { existsSync } from 'fs'
 import parseArgs from 'minimist'
 import build from '../server/build'
+import { printAndExit } from '../lib/utils'
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -29,21 +31,17 @@ if (argv.help) {
 const dir = resolve(argv._[0] || '.')
 
 // Check if pages dir exists and warn if not
-exists(dir)
-.then(async () => {
-  if (!(await exists(join(dir, 'pages')))) {
-    if (await exists(join(dir, '..', 'pages'))) {
-      console.error('> No `pages` directory found. Did you mean to run `next` in the parent (`../`) directory?')
-    } else {
-      console.error('> Couldn\'t find a `pages` directory. Please create one under the project root')
-    }
-    process.exit(1)
+if (!existsSync(dir)) {
+  printAndExit(`> No such directory exists as the project root: ${dir}`)
+}
+
+if (!existsSync(join(dir, 'pages'))) {
+  if (existsSync(join(dir, '..', 'pages'))) {
+    printAndExit('> No `pages` directory found. Did you mean to run `next` in the parent (`../`) directory?')
   }
-})
-.catch((err) => {
-  console.error(err)
-  process.exit(1)
-})
+
+  printAndExit('> Couldn\'t find a `pages` directory. Please create one under the project root')
+}
 
 build(dir)
 .catch((err) => {

diff --git a/bin/next-dev b/bin/next-dev
@@ -2,8 +2,12 @@
 import 'source-map-support/register'
 import { resolve, join } from 'path'
 import parseArgs from 'minimist'
-import { exists } from 'mz/fs'
+import { existsSync, readFileSync } from 'fs'
 import Server from '../server'
+import { printAndExit } from '../lib/utils'
+import pkgUp from 'pkg-up'
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -30,29 +34,25 @@ if (argv.help) {
 
     Options
       --port, -p      A port number on which to start the application
-      --help, -p      Displays this message
+      --help, -h      Displays this message
   `)
   process.exit(0)
 }
 
 const dir = resolve(argv._[0] || '.')
 
 // Check if pages dir exists and warn if not
-exists(dir)
-.then(async () => {
-  if (!(await exists(join(dir, 'pages')))) {
-    if (await exists(join(dir, '..', 'pages'))) {
-      console.error('> No `pages` directory found. Did you mean to run `next` in the parent (`../`) directory?')
-    } else {
-      console.error('> Couldn\'t find a `pages` directory. Please create one under the project root')
-    }
-    process.exit(1)
+if (!existsSync(dir)) {
+  printAndExit(`> No such directory exists as the project root: ${dir}`)
+}
+
+if (!existsSync(join(dir, 'pages'))) {
+  if (existsSync(join(dir, '..', 'pages'))) {
+    printAndExit('> No `pages` directory found. Did you mean to run `next` in the parent (`../`) directory?')
   }
-})
-.catch((err) => {
-  console.error(err)
-  process.exit(1)
-})
+
+  printAndExit('> Couldn\'t find a `pages` directory. Please create one under the project root')
+}
 
 const srv = new Server({ dir, dev: true })
 srv.start(argv.port)
@@ -62,6 +62,15 @@ srv.start(argv.port)
   }
 })
 .catch((err) => {
-  console.error(err)
-  process.exit(1)
+  if (err.code === 'EADDRINUSE') {
+    let errorMessage = `Port ${argv.port} is already in use.`
+    const pkgAppPath = pkgUp.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>\`.`
+    console.error(errorMessage)
+  } else {
+    console.error(err)
+  }
+  process.nextTick(() => process.exit(1))
 })
diff --git a/bin/next-init b/bin/next-init
@@ -22,7 +22,7 @@ if (argv.help) {
       If no directory is provided the current directory will be used.
 
     Options
-      --help, -p      Displays this message
+      --help, -h      Displays this message
   `)
 
   process.exit(0)

diff --git a/bin/next-start b/bin/next-start
@@ -5,6 +5,8 @@ import parseArgs from 'minimist'
 import Server from '../server'
 import { existsSync } from 'fs'
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
     h: 'help',
@@ -31,7 +33,7 @@ if (argv.help) {
 
     Options
       --port, -p      A port number on which to start the application
-      --help, -p      Displays this message
+      --help, -h      Displays this message
   `)
   process.exit(0)
 }
@@ -40,8 +42,8 @@ const dir = resolve(argv._[0] || '.')
 
 const srv = new Server({ dir })
 
-if (!existsSync(resolve(dir, '.next'))) {
-  console.error(`> Could not find the '.next' directory! Try building your app with 'next build' before starting the server.`)
+if (!existsSync(resolve(dir, '.next', 'BUILD_ID'))) {
+  console.error(`> Could not find a valid build in the '.next' directory! Try building your app with 'next build' before starting the server.`)
   process.exit(1)
 }