Add next export for static builds

.gitignore

@@ -11,3 +11,6 @@ npm-debug.log
 # coverage
 .nyc_output
 coverage
+
+# osx
+.DS_Store

bin/next

@@ -21,6 +21,7 @@ const commands = new Set([
   'init',
   'build',
   'start',
+  'export',
   defaultCommand
 ])
 

bin/next-export

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+import { resolve, join } from 'path'
+import { existsSync } from 'fs'
+import parseArgs from 'minimist'
+import Build from '../server/build'
+import Export from '../server/export'
+import { printAndExit } from '../lib/utils'
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
+const argv = parseArgs(process.argv.slice(2), {
+  alias: {
+    h: 'help',
+    o: 'out'
+  },
+  boolean: ['h']
+})
+
+if (argv.help) {
+  console.log(`
+    Description
+      Compiles and exports the application to a static website
+
+    Usage
+      $ next export <dir>
+      $ next export --out <out> <dir>
+
+    <dir> represents where the compiled folder should go.
+    If no directory is provided, <dir> will be the current directory.
+
+    <out> represents where the static directory will go.
+    If no directory is provided, <out> will be <dir>/site.
+  `)
+  process.exit(0)
+}
+
+const dir = resolve(argv._[0] || '.')
+const out = resolve(dir, argv['out'] || 'site')
+
+// Check if pages dir exists and warn if not
+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?')
+  }
+
+  printAndExit('> Couldn\'t find a `pages` directory. Please create one under the project root')
+}
+
+Build(dir)
+.then(() => Export({ dir, out }))
+.catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

client/index.js

@@ -6,6 +6,7 @@ import { createRouter } from '../lib/router'
 import App from '../lib/app'
 import evalScript from '../lib/eval-script'
 import { loadGetInitialProps, getURL } from '../lib/utils'
+import querystring from 'querystring'
 
 // Polyfill Promise globally
 // This is needed because Webpack2's dynamic loading(common chunks) code
@@ -18,6 +19,7 @@ if (!window.Promise) {
 
 const {
   __NEXT_DATA__: {
+    exported,
     component,
     errorComponent,
     props,
@@ -35,7 +37,10 @@ let lastAppProps
 export const router = createRouter(pathname, query, getURL(), {
   Component,
   ErrorComponent,
-  err
+  err,
+  formatURL: exported && function (buildId, route) {
+    return route ? route.replace(/\/$/, '') + '/index.json' : '/index.json'
+  }
 })
 
 const headManager = new HeadManager()
@@ -75,6 +80,10 @@ async function doRender ({ Component, props, hash, err, emitter }) {
     // fetch props if ErrorComponent was replaced with a page component by HMR
     const { pathname, query } = router
     props = await loadGetInitialProps(Component, { err, pathname, query })
+  } else if (exported && !lastAppProps) {
+    const { pathname } = router
+    const query = querystring.parse(window.location.search.slice(1))
+    props = await loadGetInitialProps(Component, { err, pathname, query })
   }
 
   if (emitter) {

examples/static-export/pages/about.js

@@ -0,0 +1,28 @@
+import { Component } from 'react'
+import Router from 'next/router'
+
+export default class About extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {}
+  }
+
+  static async getInitialProps (ctx) {
+    console.log('loading about!', ctx)
+    return {}
+  }
+
+  static async getStaticInitialProps (ctx) {
+    console.log('build props', ctx)
+    return {}
+  }
+
+  render () {
+    return (
+      <div>
+        <h2>About Me</h2>
+        <a onClick={() => Router.push('/')}>Go Back to Index</a>
+      </div>
+    )
+  }
+}

examples/static-export/pages/index.js

@@ -0,0 +1,38 @@
+import { Component } from 'react'
+import Button from '../ui/button'
+import Link from 'next/link'
+
+export default class Index extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      answer: ''
+    }
+  }
+
+  static async getInitialProps ({ pathname }) {
+    return {
+      title: 'Hello Static Stack!'
+    }
+  }
+
+  render () {
+    return (
+      <div>
+        <h2>{this.props.title}</h2>
+        <Link href='/about'><a>Learn more about me</a></Link>
+        <br />
+        <br />
+        <Button onClick={() => this.setState({ answer: 'yes.' })}>
+          Did Rehydration Work?
+        </Button>
+        <br />
+        <br />
+        <div>{this.state.answer}</div>
+        <br />
+        <Link href='/movies'><a>Check out the movies</a></Link>
+        <a onClick={() => (document.location.pathname = '/about')}>Go to my about page</a>
+      </div>
+    )
+  }
+}

examples/static-export/pages/movies/index.js

@@ -0,0 +1,19 @@
+
+import { Component } from 'react'
+import Link from 'next/link'
+
+export default class Movies extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {}
+  }
+
+  render (props) {
+    return (
+      <div>
+        <h2>Some of my favorite movies</h2>
+        <Link href='/'><a>Go Back to Index</a></Link>
+      </div>
+    )
+  }
+}

examples/static-export/ui/button.js

@@ -0,0 +1,3 @@
+export default ({ onClick, children }) => (
+  <button onClick={onClick}>{children}</button>
+)

lib/router/router.js

@@ -10,7 +10,7 @@ import { _notifyBuildIdMismatch } from './'
 const webpackModule = module
 
 export default class Router {
-  constructor (pathname, query, as, { Component, ErrorComponent, err } = {}) {
+  constructor (pathname, query, as, { Component, ErrorComponent, err, formatURL } = {}) {
     // represents the current component key
     this.route = toRoute(pathname)
 
@@ -22,6 +22,7 @@ export default class Router {
 
     // Handling Router Events
     this.events = mitt()
+    this.formatURL = formatURL || this.formatURL
 
     this.prefetchQueue = new PQueue({ concurrency: 2 })
     this.ErrorComponent = ErrorComponent
@@ -333,10 +334,13 @@ export default class Router {
     return promise
   }
 
+  formatURL (buildId, route) {
+    return `/_next/${encodeURIComponent(buildId)}/pages${route}`
+  }
+
   doFetchRoute (route) {
     const { buildId } = window.__NEXT_DATA__
-    const url = `/_next/${encodeURIComponent(buildId)}/pages${route}`
-
+    const url = this.formatURL(buildId, route)
     return fetch(url, {
       method: 'GET',
       credentials: 'same-origin',

lib/utils.js

@@ -54,6 +54,18 @@ export async function loadGetInitialProps (Component, ctx) {
   return props
 }
 
+export async function loadGetStaticInitialProps (Component, ctx) {
+  if (!Component.getStaticInitialProps) return {}
+
+  const props = await Component.getStaticInitialProps(ctx)
+  if (!props) {
+    const compName = Component.displayName || Component.name
+    const message = `"${compName}.getStaticInitialProps()" should resolve to an object. But found "${props}" instead.`
+    throw new Error(message)
+  }
+  return props
+}
+
 export function getLocationOrigin () {
   const { protocol, hostname, port } = window.location
   return `${protocol}//${hostname}${port ? ':' + port : ''}`

package.json

@@ -65,6 +65,7 @@
     "cross-spawn": "5.1.0",
     "del": "2.2.2",
     "friendly-errors-webpack-plugin": "1.5.0",
+    "fs-promise": "2.0.2",
     "glob-promise": "3.1.0",
     "htmlescape": "1.1.1",
     "http-status": "1.0.1",
@@ -79,6 +80,7 @@
     "mz": "2.6.0",
     "path-match": "1.2.4",
     "pkg-up": "1.0.0",
+    "querystring": "^0.2.0",
     "react-hot-loader": "3.0.0-beta.6",
     "send": "0.15.1",
     "source-map-support": "0.4.14",

server/document.js

@@ -61,13 +61,13 @@ export class NextScript extends Component {
 
   getChunkScript (filename, additionalProps = {}) {
     const { __NEXT_DATA__ } = this.context._documentProps
-    let { buildStats } = __NEXT_DATA__
+    let { buildStats, exported } = __NEXT_DATA__
     const hash = buildStats ? buildStats[filename].hash : '-'
 
     return (
       <script
         type='text/javascript'
-        src={`/_next/${hash}/${filename}`}
+        src={exported ? `/${filename}` : `/_next/${hash}/${filename}`}
         {...additionalProps}
       />
     )