Skip to content

vzsoares/nextjs-ultimate-saas

Repository files navigation

NextJs Ultimate SaaS

GitHub language count GitHub language count GitHub forks GitHub forks GitHub forks GitHub forks GitHub forks Connect on linkedin

Have many clients in one single machine(or many)

Why 🤔

The possibility to deploy all clients in one single vm is mainly about cost 💵, one NextJs machine can handle a lot of work and thus is optimal to start as a new product with a few clients.

Then when it grows you can finally give each client its own vm

How 👨‍💻

The trick here is to use middleware in conjunction with a Header (e.g: X-App-Client) and use that to mask a generic route with redirect and rewrite

Features 📃

  • Single deployment mode
  • Instances deployment mode
  • Ansible for deploy
  • Containerized Application
  • Github action to automate
  • Factories for each page
  • Theme context strategy
  • Chewed out scripts in Makefile

Single vs Instances 🔗

These are the deployments mode of the application it affects the middleware and deploy pipeline behavior.

They will both check for NEXT_PUBLIC_BUILD_TYPE to chose how to behave

Single:

The NextJs middleware will check for a Header X-App-Client and then rewrite the route to /[client]/about. All the clients will share the same VM

Instances:

The image will be built with a client bound to it so wherever you deploy it's going to work nicely Each client will be deployed in it own VM

Usage ☃️

You gonna need aws credentials

Take a look at .env.example then create your own .env with your own variables. Also create a github environment with them.

Change the theme in src/ClientInterface.ts

All you need for build, push, run, deploy is in Makefile

Also look for foo baz bar and change for the name of your clients

.github
└── workflows
    └── ...github actions
ansible-playbooks
└── ...playbooks
src
├── app
│   └── [client]
│       └── ...pages used when SINGLE
├── ...pages -- used when INSTANCES
├── components
│   └── pages
│       └── ...page components factories
├── middleware.ts -- magic
└── ClientInterface.ts -- clients strategy - routing, theming
Makefile -- all you need

Architecture 🎨

infra:

layout showcase