Building Scalable Multi-Tenant Applications With Next.js

Hello and namaste, New York. I hope you all are doing well and enjoying the conference so far. Thank you so much for joining my talk and I really appreciate you being here. I'm really excited today to be talking about building scalable multi-tenant applications with Next.js.

In this short talk, we'll be covering what multi-tenancy is, what are the advantages of multi-tenancy, what are the measures that you need to keep in mind when you're building a multi-tenant application, and how does Next.js help us in all of that.

Before starting, I'd like to introduce myself. My name is Chakith Arora, I'm a solutions engineer at Storyblok. I'm a full-stack developer, I'm a technical content writer, I like to be involved in communities. I'm always here and there in the meetups, so probably you can find me somewhere. This is my website, as mentioned over here, chakitharora.com, and there's my Twitter as well, Arora Chakith, you can reach me anytime you want. So yeah, let's just dive into the topic then.

Before starting multi-tenancy, we need to know what a tenant is, right? So, what is even a tenant? By definition, a tenant is something that a group of users or a group of people visiting your app, using your app, who share the same access, or a similar access. Just to give you a couple of examples, you can see that, for example, on your website, let's say if someone is visiting, normal users will have different access, the e-commerce site will be something else, the blog will be hosted on a different portal, let's say, there are going to be different internal portals, company portals and so on. Just to give you a real use case scenario, let's say there's a test platform, or something like that, where students, they come in and they give tests, then there is going to be one tenant, which is going to be students, there's going to be another tenant, which is going to be teachers, who are making the tests or building up the tests, watching, seeing the analytics and so on. Then there's also going to be another tenant over there, let's say admins, who are going to be taking a look at everything, adding teachers, giving them permissions and so on. Nowadays, it's pretty common to have these sort of applications, which have everything in one. But let's also see a bit more detail of how it looks.

Yeah, let's talk about what is multi-tenancy now. And yeah, I mean, to know multi-tenancy, we also need to know the architecture of how multi-tenant architecture looks, as well as the single-tenant architecture. So, let's take a look at the single-tenant first. This is how the architecture looks like. So, this used to be very common a couple of years ago, and still is. There is no harm in this, but we will discuss the benefits of multi-tenancy and everything. But this is how a single-tenant architecture looks like. So, you have a tenant, maybe a student, for example, the thing that we discussed before for a test platform. They have a separate application for them and a separate database for them. Then, teachers might have separate applications for them, separate database for them, and so on. So, that's how a single-tenant architecture looks like. But when we go to the multi-tenant architecture, they all share the same app, but they have different access, they have different roles over there, they have different permissions over there, and so on. So, this is how the architecture looks like in that case. So, no matter whoever is visiting the website, visiting your app, it is going to be the same app, and the database can be shared, cannot be shared, and so on. That depends on the architecture, but they all can share the same app with different sets of permissions, and so on. And yeah, we can talk about a bunch of examples in this case. I'm sure that everyone might be using something where they have some sort of access, and their managers or their admins are going to be having different access, and so on. The similar example that we discussed before. So, yeah, that's the basic example, and that's how the architecture looks like. Every tenant, they can visit the same app, and then the app is going to handle everything for them. The app is going to show a different layout, the app is going to show different color themes, the app can be completely different as well.

Let's talk about the benefits of having a multi-tenant architecture a bit. So, all of these listed ones over here are the benefits, and that account can go on. There are many more benefits as well.

The first one would be easy maintenance. So, as you can see, you're maintaining just one app. Of course, the app can have different code bases maybe, but you can share some of the code, so the maintenance is easy. You can follow an atomic approach as well where you can share a lot of components. It's efficient, and as we're sharing everything, as we're working like this, it's scalable as well, and cheaper, of course. If you're using just one app, similar sort of databases, it's pretty easy to maintain three different infrastructures compared to maintaining three different infrastructures.

Let's also see the challenges that come up with multi-tenancy. So, the first one here is, for example, scalability. If you have completely different applications, it's kind of easier at times to scale. I mean, now we have a bunch of tools to scale multi-tenant architecture as well, but just talking about the old structure, it's pretty easy, right? You have a complete separate application for everything, so you can just maintain it the way you want. You can just scale it the way you want. Isolation was pretty easy. In this case, we need to maintain the isolation. We need to make sure we have measures so that no one can access the other person's data or so on, so other tenant's data. So, the students cannot access what the teachers see and so on. Same goes for security and customization. You need to have different sorts of customization in place.

Let's move on and let's see how multi-tenancy works with Next.js. So, what I want to do is I want to quickly cover three basic things, like when the user comes, when the tenant comes onto the website, what you do and how the things work. So, the first thing goes on is you need to detect the tenant. They can be in different ways. You can have students.myapp.com, you can have teachers.myapp.com and so on. Then it could be path-based as well, where you have myapp.com slash teachers, myapp.com slash students and a bunch of things. We need to, whenever someone is visiting these sub-domains of our platform, we need to identify which tenant is that. So, that is pretty easy with Next.js nowadays. You can just have middlewares in place and the middlewares can detect the tenant for you. Same goes for server-side props. It depends on the use-case but server-side props, which is again a Next.js feature, can also allow you to identify the tenant and so on. This can also be query-based, but I haven't seen many examples of this being query-based. It can be either sub-domain or path-based, but it's pretty easy to identify the domain and that would be the first step.

Also, with Next.js, you can have these different domains in place. You can pretty easily organize these different sub-domains, different paths and so on.

Let's move on to the second step, which is dynamic routing. I have a couple of screenshots in place over here, which I was looking at and I was trying to create for this presentation. In this case, we also need dynamic routing. You don't want to show the same pages to both of the tenants. In this case, Next.js gives you a very good way to maintain all of these things. You can have completely separate routes. For example, in this case, tenant 1 can have a different layout, tenant 2 can have a different layout, and this is something which is really important. You want to have a customized and personalized look and feel for the tenant coming in, then you can just completely separate them by this. Of course, you don't have to do everything very manually. You get a bunch of features with Next.js, it's not that you have to generate all of these pages. You can use things like generate static params and so on for making these things easier. Just mentioning it because these things are pretty much used with these sort of folder structures and so on. Then of course the middleware can be somewhere sitting on the root level.

Moving on, let's say you have now identified the tenant, you are inside the application, you have a completely different look and feel for the tenant, but now it also depends on what they interact with. You again don't want to fetch something for them that doesn't belong to them. In that case, the API routing that Next.js can also be very useful. You can see that you can just do API slash tenant ID, which can be anything. You can also separate the APIs in such a manner where you can isolate the data fetching for different tenants. This goes for security as well. You can use middlewares for this case as well, for request validation and so on. This would be a general way of how you would do the API routing as well.

Quickly moving on to the other slide where I would want to just highlight a couple of more features with Next.js that can help you around this. We have already spoken a couple of times about middlewares, but these are all the listed things that the middlewares can help you with while you're building your multi-tenant application. For example, authentication, authorization, server-side redirects, conditional redirects, data isolation and so on. This is a very basic snippet over here that can help you understand how it can work. You can just get the domain splitted and just redirect it to the layout that you want. That's how easily the middleware would work.

Moving on to the last topic, which is scalability. I just want to talk about how you would scale these applications. I generally want to talk about the architecture or the ecosystem that Next.js has. There is caching which can help you scaling these applications. It's a component-based approach. It's a modular approach where you can share the modules. You can easily do load balancing. You have a bunch of serverless functions, serverless platforms that you can use with Next.js, which can perform different things for you at different times for different tenants, let's say. Then there are different types of rendering that can help you with maintaining these architectures and scaling these things. Authentication, we already covered that with middleware, but there are also different ways in which you can do the authentication. That's how you scale a multi-tenant application with Next.js. To conclude, this is what I always say. I know Next.js has been there for a while now. There are different frameworks as well, but looking at the way Next.js is scaling nowadays, I'd like to say Next is Next.js. Next.js is always coming up with exciting features and so on. It's pretty common nowadays to use these sort of frameworks along with the capabilities they have for maintaining multi-tenant architecture. That's all about the talk. Thank you so much for being here. In case you want to reach out, again, that's my Twitter on the left bottom. Feel free to do that. I hope you enjoy the rest of your conference. Thank you so much. Bye.