Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vzsoares/nextjs-ultimate-saas
SaaS POC in NextJs
https://github.com/vzsoares/nextjs-ultimate-saas
cicd nextjs sass typescript
Last synced: about 1 month ago
JSON representation
SaaS POC in NextJs
- Host: GitHub
- URL: https://github.com/vzsoares/nextjs-ultimate-saas
- Owner: vzsoares
- License: mit
- Created: 2024-06-23T20:38:43.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-07-31T22:46:33.000Z (5 months ago)
- Last Synced: 2024-08-01T03:41:17.538Z (5 months ago)
- Topics: cicd, nextjs, sass, typescript
- Language: TypeScript
- Homepage:
- Size: 4.18 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# NextJs Ultimate SaaS
[](https://www.linkedin.com/in/vinicius-zenha/)
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](https://nextjs.org/docs/app/building-your-application/routing/middleware) in conjunction with a `Header`
(e.g: X-App-Client) and use that to `mask` a [generic route](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) with [redirect and rewrite](https://nextjs.org/docs/app/building-your-application/routing/middleware#nextresponse)
## 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
## [File tree 🌲]()
```
.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
