2.3 KiB
2.3 KiB
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 apages/blog/index.js
page. - The
blog
app setsassetPrefix
so that generated JS bundles are within the/blog
subfolder.- To also support the plain
next dev
scenario,assetPrefix
is set dynamically based on theBUILDING_FOR_NOW
environment variable, seevercel.json
andblog/next.config.js
. - Images and other
static
assets have to be prefixed manually, e.g.,<img src={`${process.env.ASSET_PREFIX}/static/image.png`} />
, seeblog/pages/blog/index.js
.
- To also support the plain
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 ofnext dev
, as it can start both apps at the same time and use the routes defined invercel.json
Deploy it to the cloud with Vercel (Documentation).