Introducing the concept
Imagine a centralized hub for overseeing all technical facets of your business—ranging from online advertising campaigns and website management to key analytics and even business legal documentation. Introducing our latest client management portal, built as a multi-tenant application. This platform empowers clients to select and subscribe to the services that align with their needs. To kickstart this endeavor, we've chosen Payload CMS as our foundation.
To those who are unaware, Payload CMS is a developer-first application framework that lets your build fully customizable content management systems. If a feature does not exist, Payload makes it easy to create and implement new ones into your system.
Laying the foundation
We're kicking off with Payload v2 and NextJS 14. While Payload is in the process of transitioning NextJS from Express - we've decided to maintain a clear separation between our Payload backend and NextJS frontend. As a result, our NextJS server will be hosted on Vercel, while our Payload server will reside on Google Cloud. MongoDB Atlas will serve as our database provider, and for rich text functionality, we're adopting Lexical—a recent addition to Payload, which in our view,offers a more user-friendly experience compared to Slate. Lastly, we've opted for Webpack as our bundler. It may not be as sexy as Vite, but with the imminent release of Payload v3 and Turbopack we believe it's best to postpone any significant changes to our bundler for now.
Access control
Access control is the most important part of building a multi-tenant system. Every collection in the project has an associated Organization. When requesting data from Payload, we need to include an identifier. For instance, a domain name or an organization id. This ensures that users belonging to separate organizations do not have access to other organization's data. The users may be sharing an application, but their data is kept partitioned as if it were in it's own database.
The "Super Admin"
With this basic fundamental set - we want to be able to start creating pages, media, and blog posts while logged in as an organization administrator. In order to give developers full access to the system and access resources across multiple tenants, a "Super Admin" role has been created in our system. This role has access to all data in an organization which is important for debugging certain issues as well as helping modify our user's website data.
Live preview
Payload 2 comes with a nifty live preview feature. This feature lets us nest our website directly in the Payload window - making changes to the content of our site and seeing these changes reflected in real time. Our NextJS app folder uses the following structure [domain] -> [...slug]. Controlled via middleware, NextJS takes the domain of the incoming request and maps the target directory to that domain. With this simple re-routing mechanic, all we need to do is fetch the data for the page we wish to render using the domain and slug. Et voila - we have live preview directly from Payload.
If you want to try create your own version of a multi-tenant app, we recommend checking out this This excellent article from Jacob at Payload as well as this NextJS multi-tenancy guide from Vercel. Combining the logic from both of these articles gives you a great starting point for your Multi-tenant app.
Wrapping up
With the work done on our basic multi-tenant set-up, it's time to look at building out the core functionality of the system. Mainly the creation of dynamic layout and theme templates, custom fields, and adding additional elements to Payload's UI so that our users can use it for more than just building websites. Check in next week to keep up to speed with the development of this project!