Fix with-zones example

examples/with-zones/README.md

@@ -0,0 +1,62 @@
+# Using multiple zones
+
+With Next.js you can use multiple apps as a single app using it's [multi-zones feature](https://nextjs.org/docs#multi-zones). This is an example showing how to use it.
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-zones)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npm init next-app --example with-zones with-zones-app
+# or
+yarn create next-app --example with-zones with-zones-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-zones
+cd with-zones
+```
+
+## Notes
+
+In this example, we have two apps: 'home' and 'blog'. We'll start both apps with [Now](https://zeit.co/now):
+
+```bash
+now dev
+```
+
+Then, you can visit <http://localhost:3000> and develop for both apps as a single app.
+
+You can also start the apps separately, for example:
+
+```bash
+cd blog
+yarn dev
+```
+
+## Special Notes
+
+- All pages should be unique across zones. For example, the 'home' app should not have a `pages/blog/index.js` page.
+- The 'blog' app sets `assetPrefix` so that generated JS bundles are within the `/blog` subfolder.
+  - To also support the plain `next dev` scenario, `assetPrefix` is set dynamically based on the `BUILDING_FOR_NOW` environment variable, see [`now.json`](now.json) and [`blog/next.config.js`](blog/next.config.js).
+  - Images and other `/static` assets have to be prefixed manually, e.g., `` <img src={`${process.env.ASSET_PREFIX}/static/image.png`} /> ``, see [`blog/pages/blog/index.js`](blog/pages/blog/index.js).
+
+## Production Deployment
+
+We only need to run `now`, the same `now.json` used for development will be used for the deployment:
+
+```bash
+now
+```

examples/with-zones/blog/.gitignore

@@ -0,0 +1,4 @@
+.next
+node_modules
+
+.now

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

@@ -0,0 +1,8 @@
+const assetPrefix = process.env.BUILDING_FOR_NOW ? '/blog' : ''
+
+module.exports = {
+  assetPrefix,
+  env: {
+    ASSET_PREFIX: assetPrefix,
+  },
+}

examples/with-zones/blog/now.json

@@ -0,0 +1,13 @@
+{
+  "build": {
+    "env": {
+      "BUILDING_FOR_NOW": "true"
+    }
+  },
+  "rewrites": [
+    {
+      "source": "/blog/_next$1",
+      "destination": "/_next$1"
+    }
+  ]
+}

examples/with-zones/blog/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "with-zones-blog",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev -p 4000"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "16.8.6",
+    "react-dom": "16.8.6"
+  },
+  "license": "ISC"
+}

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

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export default () => (
+  <div>
+    <h3>This is our blog</h3>
+    <ul>
+      <li>
+        <Link href="/blog/post/[id]" as="/blog/post/1">
+          <a>Post 1</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/blog/post/[id]" as="/blog/post/2">
+          <a>Post 2</a>
+        </Link>
+      </li>
+    </ul>
+    <a href="/">Home</a>
+    <div>
+      <img width={200} src={`${process.env.ASSET_PREFIX}/static/nextjs2.png`} />
+    </div>
+  </div>
+)

examples/with-zones/blog/pages/blog/post/[id].js

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default () => {
+  const router = useRouter()
+  return (
+    <div>
+      <h3>Post #{router.query.id}</h3>
+      <p>Lorem ipsum</p>
+      <Link href="/blog">
+        <a>Back to blog</a>
+      </Link>
+    </div>
+  )
+}

examples/with-zones/home/.gitignore

@@ -0,0 +1,4 @@
+.next
+node_modules
+
+.now

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

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

examples/with-zones/home/now.json

@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/blog(.*)",
+      "destination": "https://with-zones-blog.now.sh$1"
+    }
+  ]
+}

examples/with-zones/home/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "with-zones-home",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev -p 4001"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "16.8.6",
+    "react-dom": "16.8.6"
+  },
+  "license": "ISC"
+}

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

@@ -0,0 +1,13 @@
+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="/static/zeit.png" />
+  </div>
+)

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

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

examples/with-zones/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "with-zones-example",
+  "private": true
+}