Universal Webpack

asset.js

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

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,9 @@ const {
   location
 } = window
 
+// With this, static assets will work across zones
+asset.setAssetPrefix(assetPrefix)
+
 const asPath = getURL()
 
 const pageLoader = new PageLoader(buildId, assetPrefix)
@@ -93,10 +97,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 +160,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/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/hello-world/pages/about2.js

@@ -0,0 +1,3 @@
+export default () => (
+  <div>About 2</div>
+)

examples/hello-world/pages/day/index.js

@@ -0,0 +1,3 @@
+export default () => (
+  <div>Hello Day</div>
+)

examples/with-zones/README.md

@@ -0,0 +1,71 @@
+[![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-zones)
+
+# Using multiple zones
+
+With Next.js you can use multiple apps as a single app using it's multi-zones feature.
+This is an example showing how to use it.
+
+In this example, we've two apps: 'home' and 'blog'.
+We also have a set of rules defined in `rules.json` for the proxy.
+
+Now let's start two of our app using:
+
+```
+npm run home
+npm run blog
+```
+
+Then start the proxy:
+
+```
+npm run proxy
+```
+
+Now you can visit http://localhost:9000 and access and develop both apps a single app.
+
+### Proxy Rules
+
+This is the place we define rules for our proxy. Here are the rules(in `rules.json`) available for this app:
+
+```json
+{
+  "rules": [
+    {"pathname": "/blog", "method":["GET", "POST", "OPTIONS"], "dest": "http://localhost:5000"},
+    {"pathname": "/**", "dest": "http://localhost:4000"}
+  ]
+}
+```
+
+These rules are based on ZEIT now [path alias](https://zeit.co/docs/features/path-aliases) rules and use [`micro-proxy`](https://github.com/zeit/micro-proxy) as the proxy.
+
+## Special Notes
+
+* All pages should be unique across zones. A page with the same name should not exist in multiple zones. Otherwise, there'll be unexpected behaviour in client side navigation.
+    * According to the above example, a page named `blog` should not be exist in the `home` zone.
+
+## Production Deployment
+
+Here's how are going to deploy this application into production.
+
+* Open the `now.json` file in both `blog` and `home` directories and change the aliases as you wish.
+* Then update `rules-prod.json` accordingly.
+* Now deploy both apps:
+
+~~~sh
+cd home
+now && now alias
+cd ../blog
+now && now alias
+cd ..
+~~~
+
+* Finally, set the path alias rules with
+
+~~~sh
+now alias with-zones.now.sh -r rules-prod.json
+~~~
+
+> You can use a domain name of your choice in the above command instead of `with-zones.now.sh`.
+
+That's it.
+Now you can access the final app via: <https://with-zones.now.sh>

examples/with-zones/blog/.gitignore

@@ -0,0 +1,2 @@
+.next
+node_modules

examples/with-zones/blog/next.config.js

@@ -0,0 +1,6 @@
+const { NOW_URL } = process.env
+const { alias } = require('./now.json')
+
+module.exports = {
+  assetPrefix: NOW_URL ? `https://${alias}` : 'http://localhost:5000'
+}

examples/with-zones/blog/now.json

@@ -0,0 +1,3 @@
+{
+  "alias": "with-zones-blog.now.sh"
+}

examples/with-zones/blog/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "with-zones-blog",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "next build",
+    "start": "next start -p 4000"
+  },
+  "dependencies": {
+    "next": "zones",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}

examples/with-zones/blog/pages/blog.js

@@ -0,0 +1,5 @@
+export default () => (
+  <div>
+    This is our blog
+  </div>
+)

examples/with-zones/home/.gitignore

@@ -0,0 +1,2 @@
+.next
+node_modules

examples/with-zones/home/components/Header.js

@@ -0,0 +1,5 @@
+export default () => (
+  <div>
+    <h2>The Company</h2>
+  </div>
+)

examples/with-zones/home/next.config.js

@@ -0,0 +1,6 @@
+const { NOW_URL } = process.env
+const { alias } = require('./now.json')
+
+module.exports = {
+  assetPrefix: NOW_URL ? `https://${alias}` : 'http://localhost:4000'
+}

examples/with-zones/home/now.json

@@ -0,0 +1,3 @@
+{
+  "alias": "with-zones-home.now.sh"
+}

examples/with-zones/home/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "with-zones-home",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "next build",
+    "start": "next start -p 4000"
+  },
+  "dependencies": {
+    "next": "zones",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}

examples/with-zones/home/pages/about.js

@@ -0,0 +1,10 @@
+import asset from 'next/asset'
+import Link from 'next/link'
+
+export default () => (
+  <div>
+    <p>This is the about page.</p>
+    <div><Link href='/'><a>Go Back</a></Link></div>
+    <img width={200} src={asset('/zeit.png')} />
+  </div>
+)

examples/with-zones/home/pages/index.js

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import asset from 'next/asset'
+import dynamic from 'next/dynamic'
+
+const Header = dynamic(import('../components/Header'))
+
+export default () => (
+  <div>
+    <Header />
+    <p>This is our homepage</p>
+    <div><Link href='/blog'><a>Blog</a></Link></div>
+    <div><Link href='/about'><a>About us</a></Link></div>
+    <img width={200} src={asset('/nextjs.png')} />
+  </div>
+)

examples/with-zones/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "with-zones",
+  "version": "1.0.0",
+  "scripts": {
+    "home": "next home -p 4000",
+    "home-build": "next build home",
+    "home-start": "next start home -p 4000",
+    "blog": "next blog -p 5000",
+    "blog-build": "next build blog",
+    "blog-start": "next start blog -p 5000",
+    "proxy": "micro-proxy -r rules-dev.json"
+  },
+  "dependencies": {
+    "micro-proxy": "^1.0.0",
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}

examples/with-zones/rules-dev.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    {"pathname": "/blog", "method":["GET", "POST", "OPTIONS"], "dest": "http://localhost:5000"},
+    {"pathname": "/**", "dest": "http://localhost:4000"}
+  ]
+}

examples/with-zones/rules-prod.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    {"pathname": "/blog", "method":["GET", "POST", "OPTIONS"], "dest": "https://with-zones-blog.now.sh"},
+    {"pathname": "/**", "dest": "https://with-zones-home.now.sh"}
+  ]
+}

lib/asset.js

@@ -0,0 +1,10 @@
+let assetPrefix
+
+export default function asset (path) {
+  const pathWithoutSlash = path.replace(/^\//, '')
+  return `${assetPrefix}/static/${pathWithoutSlash}`
+}
+
+export function setAssetPrefix (url) {
+  assetPrefix = url
+}

lib/dynamic.js

@@ -160,6 +160,11 @@ export function flushChunks () {
 }
 
 export class SameLoopPromise {
+  static resolve (value) {
+    const promise = new SameLoopPromise((done) => done(value))
+    return promise
+  }
+
   constructor (cb) {
     this.onResultCallbacks = []
     this.onErrorCallbacks = []

lib/head.js

@@ -33,7 +33,7 @@ function reduceComponents (components) {
   .filter(unique())
   .reverse()
   .map((c) => {
-    const className = (c.className ? c.className + ' ' : '') + 'next-head'
+    const className = (c.props && c.props.className ? c.props.className + ' ' : '') + 'next-head'
     return React.cloneElement(c, { className })
   })
 }