2acb53bd30
**What's the problem this PR addresses?** A decent amount of the examples don't have a `name` field in `package.json` that matches their folder name, meaning they either lack a name or the names are duplicated. I was testing Yarn 2 workspaces using the entire examples directory and needed to get rid of the duplicates. **How did you fix it?** Updated the names to match the names of their folders |
||
|---|---|---|
| .. | ||
| 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 its multi-zones feature. This is an example showing how to use it.
- All pages should be unique across zones. For example, the
homeapp should not have apages/blog/index.jspage. - The
blogapp setsassetPrefixso that generated JS bundles are within the/blogsubfolder.- To also support the plain
next devscenario,assetPrefixis set dynamically based on theBUILDING_FOR_NOWenvironment variable, seevercel.jsonandblog/next.config.js. - Images and other
staticassets 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 devin 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).