History

Dominic Elm d2caaeab64 docs: add 'Open in StackBlitz' buttons to various examples (#25853 ) This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either. Here's an example: ![image](https://user-images.githubusercontent.com/12571019/121027783-88971280-c7a7-11eb-851a-0ad30cf74b42.png) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [x] Examples updated - [ ] Telemetry added. In case of a feature if it's used or not. ## Documentation / Examples - [x] Make sure the linting passes		2021-06-08 20:45:02 +00:00
..
blog	Update multi zones example (#16281 )	2020-11-16 16:21:13 +00:00
docs	Update multi zones example (#16281 )	2020-11-16 16:21:13 +00:00
home	Update next.config.js rewrites	2021-03-25 17:53:22 -07:00
.gitignore	Update multi zones example (#16281 )	2020-11-16 16:21:13 +00:00
package.json	chore: update example names to match their folders (#16268 )	2020-09-05 21:23:51 +00:00
README.md	docs: add 'Open in StackBlitz' buttons to various examples (#25853 )	2021-06-08 20:45:02 +00:00

README.md

Using multiple zones

With Next.js you can use multiple apps as a single app using its multi-zones feature. 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 home app is the main app and therefore it includes the rewrites that map to the blog app in next.config.js
The blog app sets basePath to /blog so that generated pages, Next.js assets and public assets are within the /blog subfolder.

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-zones with-zones-app
# or
yarn create next-app --example with-zones with-zones-app

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:

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!

Starting the /blog app follows a very similar process. In a new terminal, run the following commands from the root directory :

cd blog
npm install && npm run dev
# or
cd blog
yarn && yarn dev

The blog app should be up and running in http://localhost:4000!

Preview

Preview the example live on StackBlitz:

Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).

Deploy Your Local Project

To deploy the apps to Vercel, we'll use monorepos support to create a new project for each app.

To get started, push the example to GitHub/GitLab/Bitbucket and import your repo to Vercel. We're not interested in the root directory, so make sure to select the blog directory (do not start with home):

Click continue and finish the import process. After that's done copy the domain URL that was assigned to your project, paste it on home/.env, and push the change to your repo:

# Replace this URL with the URL of your blog app
BLOG_URL="https://with-zones-blog.vercel.app"

Now we'll go over the import flow again using the same repo but this time select the home directory instead:

With the home app deployed you should now be able to see both apps running under the same domain!

Any future commits to the repo will trigger a deployment to the connected Vercel projects. See the blog post about monorepos to learn more.