diff --git a/docs/advanced-features/multi-zones.md b/docs/advanced-features/multi-zones.md new file mode 100644 index 0000000000000..2a9883a2541d5 --- /dev/null +++ b/docs/advanced-features/multi-zones.md @@ -0,0 +1,47 @@ +# Multi Zones + +
+ Examples + +
+ +A zone is a single deployment of a Next.js app. You can have multiple zones and merge them as a single app. + +For example, let's say you have the following apps: + +- An app for serving `/blog/**` +- Another app for serving all other pages + +With multi zones support, you can merge both these apps into a single one allowing your customers to browse it using a single URL, but you can develop and deploy both apps independently. + +## How to define a zone + +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. + +## How to merge zones + +You can merge zones using any HTTP proxy. + +For [ZEIT Now](https://zeit.co/now), you can use a single `now.json` to deploy both apps. It allows you to easily define routing routes for multiple apps like below: + +```json +{ + "version": 2, + "builds": [ + { "src": "blog/package.json", "use": "@now/next" }, + { "src": "home/package.json", "use": "@now/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`. diff --git a/docs/manifest.json b/docs/manifest.json index 1f934f9a4029a..5fcd7ec019c73 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -148,6 +148,10 @@ { "title": "`src` Directory", "path": "/docs/advanced-features/src-directory.md" + }, + { + "title": "Multi Zones", + "path": "/docs/advanced-features/multi-zones.md" } ] }, diff --git a/examples/with-zones/blog/.gitignore b/examples/with-zones/.gitignore similarity index 100% rename from examples/with-zones/blog/.gitignore rename to examples/with-zones/.gitignore diff --git a/examples/with-zones/README.md b/examples/with-zones/README.md index 091cfb927f3c9..7e126d2d4b9c3 100644 --- a/examples/with-zones/README.md +++ b/examples/with-zones/README.md @@ -2,6 +2,11 @@ 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. +- 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., `` ``, see [`blog/pages/blog/index.js`](blog/pages/blog/index.js). + ## Deploy your own Deploy the example using [ZEIT Now](https://zeit.co/now): @@ -29,31 +34,16 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 cd with-zones ``` -## Notes - -In this example, we have two apps: 'home' and 'blog'. You can start each app separately, for example: +For every app, install dependencies and run the dev server: ```bash -cd blog +npm install +npm run dev +# or +yarn yarn dev ``` -Then, you can visit and develop your app. - -## 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., `` ``, see [`blog/pages/blog/index.js`](blog/pages/blog/index.js). - -## Production Deployment - -We only need to run `now `, to deploy the app: - -```bash -now blog -now home -``` +The `home` app will start in the default port (http://localhost:3000), and `blog` will start on http://localhost:4000. -> The rewrite destination in your `now.json` file in the `home` app must be adjusted to point to your deployment. +Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-zones/blog/now.json b/examples/with-zones/blog/now.json deleted file mode 100644 index 9dcd887d881d8..0000000000000 --- a/examples/with-zones/blog/now.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "build": { - "env": { - "BUILDING_FOR_NOW": "true" - } - }, - "rewrites": [ - { - "source": "/blog/_next$1", - "destination": "/_next$1" - } - ] -} diff --git a/examples/with-zones/blog/static/nextjs2.png b/examples/with-zones/blog/public/static/nextjs2.png similarity index 100% rename from examples/with-zones/blog/static/nextjs2.png rename to examples/with-zones/blog/public/static/nextjs2.png diff --git a/examples/with-zones/home/.gitignore b/examples/with-zones/home/.gitignore deleted file mode 100644 index e54e38fa532b3..0000000000000 --- a/examples/with-zones/home/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -.next -node_modules - -.now \ No newline at end of file diff --git a/examples/with-zones/home/now.json b/examples/with-zones/home/now.json deleted file mode 100644 index 7981357aa4e9b..0000000000000 --- a/examples/with-zones/home/now.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "rewrites": [ - { - "source": "/blog(.*)", - "destination": "https://with-zones-blog.now.sh$1" - } - ] -} diff --git a/examples/with-zones/home/package.json b/examples/with-zones/home/package.json index 2c89f05dfbdd5..10e8e1055d365 100644 --- a/examples/with-zones/home/package.json +++ b/examples/with-zones/home/package.json @@ -2,7 +2,7 @@ "name": "with-zones-home", "version": "1.0.0", "scripts": { - "dev": "next dev -p 4001" + "dev": "next dev" }, "dependencies": { "next": "latest", diff --git a/examples/with-zones/home/static/nextjs.png b/examples/with-zones/home/public/static/nextjs.png similarity index 100% rename from examples/with-zones/home/static/nextjs.png rename to examples/with-zones/home/public/static/nextjs.png diff --git a/examples/with-zones/home/static/zeit.png b/examples/with-zones/home/public/static/zeit.png similarity index 100% rename from examples/with-zones/home/static/zeit.png rename to examples/with-zones/home/public/static/zeit.png diff --git a/examples/with-zones/now.json b/examples/with-zones/now.json new file mode 100644 index 0000000000000..10c3b2ca77834 --- /dev/null +++ b/examples/with-zones/now.json @@ -0,0 +1,17 @@ +{ + "version": 2, + "build": { + "env": { + "BUILDING_FOR_NOW": "true" + } + }, + "builds": [ + { "src": "blog/package.json", "use": "@now/next" }, + { "src": "home/package.json", "use": "@now/next" } + ], + "routes": [ + { "src": "/blog/_next(.*)", "dest": "blog/_next$1" }, + { "src": "/blog(.*)", "dest": "blog/blog$1" }, + { "src": "(.*)", "dest": "home$1" } + ] +}