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 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 vercel.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.

Deploy your own

Deploy the example using Vercel:

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

Install the dependencies of every app (/home and /blog):

npm install
# or
yarn

Install the Vercel CLI if you don't have it already, and then run vercel dev in the main directory to start the development server:

vercel dev

Your app should be up and running on http://localhost:3000!

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

Deploy it to the cloud with Vercel (Documentation).