Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update multi zones example #16281

Merged
merged 15 commits into from
Nov 16, 2020
Merged
4 changes: 2 additions & 2 deletions docs/advanced-features/multi-zones.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ For [Vercel](https://vercel.com/), you can use a single `vercel.json` to deploy
{
"version": 2,
"builds": [
{ "src": "blog/package.json", "use": "@now/next" },
{ "src": "home/package.json", "use": "@now/next" }
{ "src": "blog/package.json", "use": "@vercel/next" },
{ "src": "home/package.json", "use": "@vercel/next" }
],
"routes": [
{ "src": "/blog/_next(.*)", "dest": "blog/_next$1" },
Expand Down
19 changes: 4 additions & 15 deletions examples/with-zones/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ With Next.js you can use multiple apps as a single app using it's [multi-zones f

- 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).
- To also support the plain `next dev` scenario, `assetPrefix` is set dynamically based on the `BUILDING_FOR_VERCEL` 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
Expand All @@ -15,8 +15,6 @@ Deploy the example using [Vercel](https://vercel.com):

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/vercel/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
Expand All @@ -25,21 +23,12 @@ npx create-next-app --example with-zones with-zones-app
yarn create next-app --example with-zones with-zones-app
```

### Download manually

Download the example:

```bash
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-zones
cd with-zones
```

Install the dependencies of every app (`/home` and `/blog`):
Before starting the app, you'll need the dependencies of every app (`/home` and `/blog`):

```bash
npm install
(cd home && npm install); (cd blog && npm install);
# or
yarn
(cd home && yarn); (cd blog && yarn);
```

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:
Expand Down
2 changes: 1 addition & 1 deletion examples/with-zones/blog/next.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const assetPrefix = process.env.BUILDING_FOR_NOW ? '/blog' : ''
const assetPrefix = process.env.BUILDING_FOR_VERCEL ? '/blog' : ''

module.exports = {
assetPrefix,
Expand Down
6 changes: 3 additions & 3 deletions examples/with-zones/vercel.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
"version": 2,
"build": {
"env": {
"BUILDING_FOR_NOW": "true"
"BUILDING_FOR_VERCEL": "true"
}
},
"builds": [
{ "src": "blog/package.json", "use": "@now/next" },
{ "src": "home/package.json", "use": "@now/next" }
{ "src": "blog/package.json", "use": "@vercel/next" },
{ "src": "home/package.json", "use": "@vercel/next" }
],
"routes": [
{ "src": "/blog/_next(.*)", "dest": "blog/_next$1" },
Expand Down