f00ad581a1
Co-authored-by: Joe Haddad <joe.haddad@zeit.co> |
||
---|---|---|
.. | ||
blog | ||
home | ||
.gitignore | ||
package.json | ||
README.md | ||
vercel.json |
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.
- 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
Using create-next-app
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
Download manually
Download the example:
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-zones
cd with-zones
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).