Update with-zones example (vercel#8459)

* Add more pages to the 'blog' zone - New dynamic page `pages/blog/post/[id].js` - `pages/blog.js` moved to `pages/blog/index.js` * Update Now and Next configs to support both `now dev` and `next dev` - Set `assetPrefix` dynamically to either `/blog` or `''`. - Update package.json scripts for both 'home' and 'blog' apps, support `yarn dev` in both of them. * Update example description in README * Fix formatting issues * Make `/static` assets work in the 'blog' app * Add routing rule for `/blog/static` to now.json * Shorten README I reverted it back to the state of 233152e and then updated it with info on recent changes of the `with-zones` example. * Use `continue: true` in now.json Applies suggestions from code review. Co-Authored-By: Joe Haddad <[email protected]> * Fix JSON formatting * Add routing rule for `_next` and `static` folders * Update README of with-zones example slightly Applies suggestions from code review. Co-Authored-By: Joe Haddad <[email protected]> * Remove unnecessary "dest" from `now.json` Co-Authored-By: Joe Haddad <[email protected]>
hypertrends · Aug 27, 2019 · 4292a9a · 4292a9a
1 parent 08dcbdc
commit 4292a9a
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 43 deletions.
diff --git a/examples/with-zones/README.md b/examples/with-zones/README.md
@@ -23,44 +23,29 @@ cd with-zones
 
 ## The idea behind this example
 
-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.
+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.
 
-In this example, we've two apps: 'home' and 'blog'. We'll start both apps with [Now](https://zeit.co/now):
-We also have a set of builders and routes defined in `now.json`.
+In this example, we have two apps: 'home' and 'blog'. We'll start both apps with [Now](https://zeit.co/now):
 
 ```bash
 now dev
 ```
 
-Now you can visit http://localhost:3000 and develop for both apps as a single app.
-
-### Now config
-
-`now.json` allows us to create a single dev server for any builders and routes we add to it, with `now dev` we can easily create a dev server for multiple apps without having to deploy or setup anything else:
-
-```json
-{
-  "name": "with-zones",
-  "version": 2,
-  "builds": [
-    { "src": "blog/next.config.js", "use": "@now/next" },
-    { "src": "home/next.config.js", "use": "@now/next" }
-  ],
-  "routes": [
-    { "src": "/blog/_next(.*)", "dest": "blog/_next$1" },
-    { "src": "/blog", "dest": "blog/blog" },
-    { "src": "(.*)", "dest": "home$1" }
-  ]
-}
-```
+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:
 
-The previous file is based in the [@now/next](https://zeit.co/docs/v2/deployments/official-builders/next-js-now-next/) builder and [Now Routes](https://zeit.co/docs/v2/deployments/routes/) from Now V2.
+```bash
+cd blog
+yarn dev
+```
 
 ## 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 behaviours in client side navigation.
-  - According to the above example, a page named `blog` should not be exist in the `home` zone.
+- 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
 

diff --git a/examples/with-zones/blog/next.config.js b/examples/with-zones/blog/next.config.js
@@ -1,4 +1,9 @@
+const assetPrefix = process.env.BUILDING_FOR_NOW ? '/blog' : ''
+
 module.exports = {
   target: 'serverless',
-  assetPrefix: '/blog'
+  assetPrefix,
+  env: {
+    ASSET_PREFIX: assetPrefix
+  }
 }
diff --git a/examples/with-zones/blog/package.json b/examples/with-zones/blog/package.json
@@ -2,8 +2,7 @@
   "name": "with-zones-blog",
   "version": "1.0.0",
   "scripts": {
-    "build": "next build",
-    "start": "next start -p 5000"
+    "dev": "next dev -p 4000"
   },
   "dependencies": {
     "next": "latest",

diff --git a/examples/with-zones/blog/pages/blog.js b/examples/with-zones/blog/pages/blog.js
diff --git a/examples/with-zones/blog/pages/blog/index.js b/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>
+)
diff --git a/examples/with-zones/blog/pages/blog/post/[id].js b/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>
+  )
+}
diff --git a/examples/with-zones/blog/static/nextjs2.png b/examples/with-zones/blog/static/nextjs2.png
diff --git a/examples/with-zones/home/package.json b/examples/with-zones/home/package.json
@@ -2,8 +2,7 @@
   "name": "with-zones-home",
   "version": "1.0.0",
   "scripts": {
-    "build": "next build",
-    "start": "next start -p 4000"
+    "dev": "next dev -p 4001"
   },
   "dependencies": {
     "next": "latest",

diff --git a/examples/with-zones/now.json b/examples/with-zones/now.json
@@ -6,8 +6,13 @@
     { "src": "home/next.config.js", "use": "@now/next" }
   ],
   "routes": [
-    { "src": "/blog/_next(.*)", "dest": "blog/_next$1" },
-    { "src": "/blog", "dest": "blog/blog" },
-    { "src": "(.*)", "dest": "home$1" }
-  ]
+    { "src": "/blog/(_next|static)(.*)" },
+    { "src": "/blog(.*)", "dest": "blog/blog$1", "continue": true },
+    { "src": "(?!/?blog)(.*)", "dest": "home$1", "continue": true }
+  ],
+  "build": {
+    "env": {
+      "BUILDING_FOR_NOW": "true"
+    }
+  }
 }