multi-zones-next-js

Stars
6

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 marketplace app should not have a pages/blog/index.js page.
  • The marketplace app is the main app and therefore it includes the rewrites that map to the blog app in next.config.js
  • The blog app sets basePath to /blog so that generated pages, Next.js assets and public assets are within the /blog subfolder.

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

With multi zones you have multiple Next.js apps over a single app, therefore every app has its own dependencies and it runs independently.

To start the / run the following commands from the root directory:

cd marketplace
npm install && npm run dev
# or
cd marketplace
yarn && yarn dev

The / app should be up and running in http://localhost:3000!

Starting the /blog app follows a very similar process. In a new terminal, run the following commands from the root directory :

cd blog
npm install && npm run dev
# or
cd blog
yarn && yarn dev

The blog app should be up and running in http://localhost:8080!