rsnext/examples/with-zones/README.md
Shu Uesugi 6804039e94 Make example READMEs more consistent (#10124)
* npx create → npm init

* Fix inconsistent instructions

* Update amp-first

* Update with-graphql-react

* with-firebase-cloud-messaging

* Update with-higher-order-component

* change create-next-app url

* Update create-next-app instruction

* Update instructions to use npm instead of npx

* Move "the idea behind the example" to top

* Rename

* Rename

* Update contributing.md with a README template
2020-01-16 23:23:56 +01:00

2.1 KiB

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:

Deploy with 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'. We'll start both apps with Now:

now dev

Then, you can visit http://localhost:3000 and develop for both apps as a single app.

You can also start the apps separately, for example:

cd blog
yarn dev

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, the same now.json used for development will be used for the deployment:

now