Giter Site home page Giter Site logo

multi-zones's Introduction

Multi Zones

08-28-2022

  • Sample Multi Zone App, powered by Vercel

TABLE OF CONTENT

  • Using multiple zones
  • Resources

Using multiple zones

With Next.js you can use multiple apps as a single app using its multi-zones feature. This is a custom example using the boiler-nextjs app that shows how to use it.

  • All pages should be unique across zones. For example, the home app should not have a pages/blog/index.tsx page.
  • The home 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

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 /home run the following commands from the root directory:

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

The /home 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:4000!

Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).

Deploy Your Local Project

To deploy the apps to Vercel, we'll use monorepos support to create a new project for each app.

To get started, push the example to GitHub/GitLab/Bitbucket and import your repo to Vercel. We're not interested in the root directory, so make sure to select the blog directory (do not start with home):

Import flow for blog app

Screen Shot 2022-08-28 at 10 58 40 AM

Click continue and finish the import process. After that's done copy the domain URL that was assigned to your project, paste it on home/.env, and push the change to your repo:

# Replace this URL with the URL of your blog app
BLOG_URL="https://multi-zones-blog.vercel.app"

Now we'll go over the import flow again using the same repo but this time select the home directory instead:

Import flow for home app

Screen Shot 2022-08-28 at 10 56 56 AM

With the home app deployed you should now be able to see both apps running under the same domain!

Any future commits to the repo will trigger a deployment to the connected Vercel projects. See the blog post about monorepos to learn more.

Resources

NextJS - Multi Zones

The Evolution of SaaS Architecture - Monoliths, Micro Front-End, Jamstack

Micro-frontend with React and Next.js

Micro-Frontends

multi-zones's People

Contributors

carlos-rangel avatar carlosrangel17 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.