Update multi zones example (#16281)

~Updated the `with-zones` example and docs to use `@vercel/next` instead of `@now/next` and also updated the readme instructions with better steps.~

~Related to #12317 - Looks like there may be an issue with the example but it continues to work as expected to me, moving away from `@now/next` may help.~

Fixes #12317
Closes #12317

Moved the example to use [Vercel Monorepos](https://vercel.com/blog/monorepos). Locally it switches to `next dev` instead of `vercel dev`.

docs/advanced-features/multi-zones.md

@@ -1,6 +1,6 @@
 # Multi Zones
 
-<details>
+<details open>
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-zones">With Zones</a></li>
@@ -21,27 +21,10 @@ With multi zones support, you can merge both these apps into a single one allowi
 There are no special zones related APIs. You only need to do following:
 
 - Make sure to keep only the pages you need in your app, meaning that an app can't have pages from another app, if app `A` has `/blog` then app `B` shouldn't have it too.
-- Make sure to add an [assetPrefix](/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md) to avoid conflicts with static files.
+- Make sure to configure a [basePath](/docs/api-reference/next.config.js/basepath.md) to avoid conflicts with pages and static files.
 
 ## How to merge zones
 
-You can merge zones using any HTTP proxy.
-
-For [Vercel](https://vercel.com/), you can use a single `vercel.json` to deploy both apps. It allows you to define routing routes for multiple apps like below:
-
-```json
-{
-  "version": 2,
-  "builds": [
-    { "src": "blog/package.json", "use": "@vercel/next" },
-    { "src": "home/package.json", "use": "@vercel/next" }
-  ],
-  "routes": [
-    { "src": "/blog/_next(.*)", "dest": "blog/_next$1" },
-    { "src": "/blog(.*)", "dest": "blog/blog$1" },
-    { "src": "(.*)", "dest": "home$1" }
-  ]
-}
-```
-
-You can also configure a proxy server to route using a set of routes like the ones above, e.g deploy the blog app to `https://blog.example.com` and the home app to `https://home.example.com` and then add a proxy server for both apps in `https://example.com`.
+You can merge zones using [Rewrites](/docs/api-reference/next.config.js/rewrites.md) in one of the apps or any HTTP proxy.
+
+For [Vercel](https://vercel.com/), you can use a [monorepo](https://vercel.com/blog/monorepos) to deploy both apps. Check the [Monorepos blog post](https://vercel.com/blog/monorepos) for more details on how it works and our [`with-zones` example](https://github.com/vercel/next.js/tree/canary/examples/with-zones) for a detailed guide using multiple Next.js applications.

examples/with-zones/.gitignore

@@ -1,16 +1,16 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules/
 /.pnp
 .pnp.js
 
 # testing
 /coverage
 
 # next.js
-/.next/
-/out/
+.next/
+out/
 
 # production
 /build

examples/with-zones/README.md

@@ -3,15 +3,8 @@
 With Next.js you can use multiple apps as a single app using its [multi-zones feature](https://nextjs.org/docs/advanced-features/multi-zones). This is an example showing how to use it.
 
 - 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`](https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix) 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 [`vercel.json`](vercel.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).
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com):
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-zones)
+- The `home` app is the main app and therefore it includes the rewrites that map to the `blog` app in [next.config.js](home/next.config.js)
+- The `blog` app sets [`basePath`](https://nextjs.org/docs/api-reference/next.config.js/basepath) to `/blog` so that generated pages, Next.js assets and public assets are within the `/blog` subfolder.
 
 ## How to use
 
@@ -23,22 +16,55 @@ npx create-next-app --example with-zones with-zones-app
 yarn create next-app --example with-zones with-zones-app
 ```
 
-Install the dependencies of every app (`/home` and `/blog`):
+With multi zones you have multiple Next.js apps over a single app, therefore every app has its own dependencies and it runs independently.
+
+To start the `/home` run the following commands from the root directory:
+
+```bash
+cd home
+npm install && npm run dev
+# or
+cd home
+yarn && yarn dev
+```
+
+The `/home` app should be up and running in [http://localhost:3000](http://localhost:3000)!
+
+Starting the `/blog` app follows a very similar process. In a new terminal, run the following commands from the root directory :
 
 ```bash
-npm install
+cd blog
+npm install && npm run dev
 # or
-yarn
+cd blog
+yarn && yarn dev
 ```
 
-Install the [Vercel CLI](https://vercel.com/download) if you don't have it already, and then run [`vercel dev`](https://vercel.com/docs/cli?query=dev#commands/dev) in the main directory to start the development server:
+The `blog` app should be up and running in [http://localhost:4000](http://localhost:4000)!
+
+### Deploy on Vercel
+
+You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+#### Deploy Your Local Project
+
+To deploy the apps to Vercel, we'll use [monorepos support](https://vercel.com/blog/monorepos) to create a new project for each app.
+
+To get started, push the example to GitHub/GitLab/Bitbucket and [import your repo to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example). We're not interested in the root directory, so make sure to select the `blog` directory (do not start with `home`):
+
+![Import flow for blog app](docs/import-blog.jpg)
+
+Click continue and finish the import process. After that's done copy the domain URL that was assigned to your project and paste it on `home/.env`:
 
 ```bash
-vercel dev
+# Replace this URL with the URL of your blog app
+BLOG_URL="https://with-zones-blog.vercel.app"
 ```
 
-Your app should be up and running on [http://localhost:3000](http://localhost:3000)!
+Now we'll go over the [import flow](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example) again using the same repo but this time select the `home` directory instead:
+
+![Import flow for home app](docs/import-home.jpg)
 
-> We recommend `vercel dev` in this case instead of `next dev`, as it can start both apps at the same time and use the routes defined in [`vercel.json`](vercel.json)
+With the `home` app deployed you should now be able to see both apps running under the same domain!
 
-Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+Any future commits to the repo will trigger a deployment to the connected Vercel projects. See the [blog post about monorepos](https://vercel.com/blog/monorepos) to learn more.

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

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

examples/with-zones/blog/package.json

@@ -2,12 +2,14 @@
   "name": "with-zones-blog",
   "version": "1.0.0",
   "scripts": {
-    "dev": "next dev -p 4000"
+    "dev": "next dev -p 4000",
+    "build": "next build",
+    "start": "next start"
   },
   "dependencies": {
     "next": "latest",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
-  "license": "ISC"
+  "license": "MIT"
 }

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

@@ -1,26 +1,29 @@
 import Link from 'next/link'
+import Image from 'next/image'
 
 export default function Blog() {
   return (
     <div>
       <h3>This is our blog</h3>
       <ul>
         <li>
-          <Link href="/blog/post/[id]" as="/blog/post/1">
+          <Link href="/post/1">
             <a>Post 1</a>
           </Link>
         </li>
         <li>
-          <Link href="/blog/post/[id]" as="/blog/post/2">
+          <Link href="/post/2">
             <a>Post 2</a>
           </Link>
         </li>
       </ul>
       <a href="/">Home</a>
       <div>
-        <img
+        <Image
+          src="/blog/static/nextjs.png"
+          alt="Next.js logo"
           width={200}
-          src={`${process.env.ASSET_PREFIX}/static/nextjs2.png`}
+          height={160}
         />
       </div>
     </div>

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

@@ -7,7 +7,7 @@ export default function Post() {
     <div>
       <h3>Post #{router.query.id}</h3>
       <p>Lorem ipsum</p>
-      <Link href="/blog">
+      <Link href="/">
         <a>Back to blog</a>
       </Link>
     </div>

examples/with-zones/home/.env

@@ -0,0 +1,2 @@
+# Replace this URL with the URL of your blog app
+BLOG_URL="https://with-zones-blog.vercel.app"

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

@@ -0,0 +1,16 @@
+const { BLOG_URL } = process.env
+
+module.exports = {
+  rewrites() {
+    return [
+      {
+        source: '/blog',
+        destination: `${BLOG_URL}/blog`,
+      },
+      {
+        source: '/blog/:path*',
+        destination: `${BLOG_URL}/blog/:path*`,
+      },
+    ]
+  },
+}

examples/with-zones/home/package.json

@@ -2,12 +2,14 @@
   "name": "with-zones-home",
   "version": "1.0.0",
   "scripts": {
-    "dev": "next dev"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
   },
   "dependencies": {
     "next": "latest",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
-  "license": "ISC"
+  "license": "MIT"
 }

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

@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import Image from 'next/image'
 
 const Header = dynamic(import('../components/Header'))
 
@@ -16,7 +17,12 @@ export default function Home() {
           <a>About us</a>
         </Link>
       </div>
-      <img width={200} src="/static/nextjs.png" />
+      <Image
+        src="/static/nextjs.png"
+        alt="Next.js logo"
+        width={200}
+        height={160}
+      />
     </div>
   )
 }