How To Build A Multi-Tenant SaaS Application With Next.js

|

In today’s digital age, Software as a Service (SaaS) platforms are increasingly built using modern web frameworks that support scalability, maintainability, and a great developer experience. One powerful choice for building a multi-tenant SaaS application is Next.js, a full-stack React framework.

This article walks you through how to architect and build a multi-tenant SaaS application using Next.js, including both the frontend and backend integration. We’ll explore the core concepts, tenant isolation strategies, authentication, routing, and data management with practical code examples.

What Is Multi-Tenancy?

A multi-tenant application serves multiple customers (tenants) using a single instance of the application. Each tenant’s data is isolated and secure, but the core logic is shared across all tenants.

There are three common approaches to multi-tenancy:

  • Shared Database, Shared Schema: One database for all tenants with tenant ID column in every table.

  • Shared Database, Separate Schemas: One database, each tenant has a schema.

  • Separate Databases: Each tenant has a completely isolated database.

In this article, we’ll use the Shared Database, Shared Schema approach for simplicity and scalability.

Project Structure

Here’s a simple structure for the SaaS app:

bash
my-saas-app/
├── pages/
│ ├── _app.tsx
│ ├── index.tsx
│ ├── [tenant]/dashboard.tsx
├── lib/
│ ├── db.ts
│ ├── auth.ts
│ └── tenants.ts
├── prisma/
│ └── schema.prisma
├── middleware.ts
├── .env
└── next.config.js

Setting Up the Project

First, initialize your project:

bash
npx create-next-app@latest my-saas-app --typescript
cd my-saas-app
npm install prisma @prisma/client next-auth

Set up Prisma:

bash
npx prisma init

Designing the Database Schema

Let’s define a multi-tenant schema with users and tenant organizations.

prisma/schema.prisma

prisma
model Tenant {
id String @id @default(cuid())
name String
subdomain String @unique
users User[]
}model User {
id String @id @default(cuid())
email String @unique
password String
tenantId String
tenant Tenant @relation(fields: [tenantId], references: [id])
}

Now generate the client:

bash
npx prisma migrate dev --name init
npx prisma generate

Subdomain-Based Routing with Middleware

To identify tenants, we’ll use subdomains. For example, acme.my-saas-app.com.

middleware.ts

ts

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
const host = req.headers.get(‘host’) || ”
const subdomain = host.split(‘.’)[0]

const url = req.nextUrl.clone()
url.searchParams.set(‘tenant’, subdomain)

return NextResponse.rewrite(url)
}

Enable the middleware in next.config.js:

js
module.exports = {
middleware: true,
}

Backend Integration (Tenant Context + API)

Create helper functions to fetch tenant data from the database:

lib/tenants.ts

ts
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()export async function getTenantBySubdomain(subdomain: string) {
return prisma.tenant.findUnique({
where: { subdomain }
})
}

Create a login API route:

pages/api/auth/login.ts

ts
import { NextApiRequest, NextApiResponse } from 'next'
import { PrismaClient } from '@prisma/client'
import bcrypt from 'bcryptjs'const prisma = new PrismaClient()export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { email, password, tenant } = req.bodyconst user = await prisma.user.findFirst({
where: { email, tenant: { subdomain: tenant } },
include: { tenant: true }
})if (!user || !bcrypt.compareSync(password, user.password)) {
return res.status(401).json({ error: ‘Invalid credentials’ })
}// Here you would generate a token or session
res.status(200).json({ user })
}

Frontend Integration (Tenant-Aware UI)

pages/[tenant]/dashboard.tsx

tsx
import { GetServerSideProps } from 'next'
import { getTenantBySubdomain } from '@/lib/tenants'export default function Dashboard({ tenant }: { tenant: any }) {
return (
<div>
<h1>Welcome to {tenant.name}’s Dashboard</h1>
</div>
)
}export const getServerSideProps: GetServerSideProps = async (context) => {
const subdomain = context.query.tenant as string
const tenant = await getTenantBySubdomain(subdomain)if (!tenant) {
return { notFound: true }
}return {
props: { tenant }
}
}

Adding Authentication with NextAuth

Set up NextAuth to work in a multi-tenant scenario.

pages/api/auth/[...nextauth].ts

ts
import NextAuth from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
import { PrismaClient } from '@prisma/client'
import bcrypt from 'bcryptjs'const prisma = new PrismaClient()export default NextAuth({
providers: [
CredentialsProvider({
async authorize(credentials) {
const user = await prisma.user.findFirst({
where: {
email: credentials.email,
tenant: { subdomain: credentials.tenant },
},
include: { tenant: true }
})if (user && bcrypt.compareSync(credentials.password, user.password)) {
return { id: user.id, name: user.email, tenant: user.tenant.subdomain }
}return null
}
})
],
callbacks: {
async session({ session, token }) {
session.user.tenant = token.tenant
return session
},
async jwt({ token, user }) {
if (user) {
token.tenant = user.tenant
}
return token
}
}
})

Update login page to collect tenant:

tsx
<form onSubmit={handleLogin}>
<input type="text" placeholder="Tenant" name="tenant" />
<input type="email" placeholder="Email" name="email" />
<input type="password" placeholder="Password" name="password" />
<button type="submit">Login</button>
</form>

Optional: Tenant-Specific Features

  • Custom theming via Tailwind configuration per tenant

  • Role-based access control

  • Usage tracking and analytics

  • Tenant billing integrations (Stripe)

Testing the Multi-Tenant Flow

  1. Register two tenants: acme and globex

  2. Create user accounts under each tenant

  3. Visit http://acme.localhost:3000/dashboard and http://globex.localhost:3000/dashboard

  4. Each tenant sees their own data and branding

Set up your /etc/hosts file to allow subdomains in development:

127.0.0.1 acme.localhost
127.0.0.1 globex.localhost

Conclusion

Building a multi-tenant SaaS application with Next.js is not just about creating a scalable web interface—it’s about architecting a robust, secure, and modular foundation that can support multiple customers efficiently while still being easy to maintain and extend.

Throughout this guide, we walked through a complete multi-tenant implementation—from setting up the database schema with Prisma, to leveraging middleware for subdomain-based routing, implementing secure and tenant-aware authentication with NextAuth, and finally building dynamic frontend pages that adapt to each tenant’s context. The approach we used, based on shared database and shared schema, provides an optimal balance between simplicity, maintainability, and performance for most early to mid-stage SaaS applications.

A key advantage of using Next.js for multi-tenant SaaS development is its hybrid nature—it supports both server-side and client-side rendering, which is perfect for tenant-specific dashboards, static marketing pages, and server-rendered authentication workflows. The use of middleware to extract the subdomain and propagate tenant context throughout the application ensures that users always interact within their own secure sandbox.

Meanwhile, Prisma ORM offers powerful type safety and easy schema migrations, which are essential when managing tenant-bound data and evolving your database as your app grows. NextAuth, although not multi-tenant out of the box, can be extended to support tenant-aware credential authentication with very little overhead, making it suitable for SaaS apps that need to support traditional logins per organization.

As your SaaS app grows, you can evolve this architecture in a number of ways:

  • Horizontal Scaling: You can introduce tenant-based sharding or move to per-tenant databases as needed.

  • Theming and Branding: Support tenant-specific styling (e.g., CSS variables, Tailwind configs).

  • Feature Toggles and Plans: Introduce subscription-based logic to restrict or enable features on a per-tenant basis.

  • Tenant Admin Portals: Create superadmin dashboards for tenant owners to manage users, billing, and usage.

  • Auditing and Logs: Track tenant-specific activities for analytics, compliance, or support.

One of the most critical long-term considerations in multi-tenant SaaS architecture is data isolation and security. Even though all tenants may share infrastructure and databases, your system must enforce strict access controls to prevent data leakage or unauthorized access between tenants. Fortunately, by integrating tenant IDs into every data access layer and scoping all operations appropriately, you can ensure that your SaaS platform remains both scalable and secure.

In closing, Next.js offers a powerful and flexible ecosystem to build modern SaaS applications with multi-tenant support baked into the core. By following the patterns outlined in this article—leveraging subdomains, tenant-aware APIs, and a shared schema—you are well-positioned to grow your SaaS product confidently, serving dozens, hundreds, or even thousands of tenants with minimal friction. Whether you’re building a CRM, analytics platform, internal tooling, or B2B solution, this architecture can serve as a strong foundation for long-term success.