rsnext/examples/with-zones

Using multiple zones

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.

Deploy your own

Deploy the example using ZEIT Now:

How to use

Using create-next-app

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

npm init next-app --example with-zones with-zones-app
# or
yarn create next-app --example with-zones with-zones-app

Download manually

Download the example:

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

Notes

In this example, we have two apps: 'home' and 'blog'. You can start each app separately, for example:

cd blog
yarn dev

Then, you can visit http://localhost:3000 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 and 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.

Production Deployment

We only need to run now <app>, to deploy the app:

now blog
now home

The rewrite destination in your now.json file in the home app must be adjusted to point to your deployment.