Unlock Success: Building Multi-Tenant Applications with Next.js – A Beginner’s Guide

05 Dec, 2024 by Vikrant Verma

8 min read

Unlock Success: Building Multi-Tenant Applications with Next.js – A Beginner’s Guide

The rise of SaaS (Software as a Service) has brought Multi-Tenant Applications with Next.js to the forefront. Multi-tenant applications allow a single application instance to serve multiple customers (or tenants), ensuring that each tenant gets a personalized experience while sharing the same underlying codebase. This architecture makes software scalable, cost-efficient, and customizable.

Key Characteristics of Multi-Tenant Applications

Shared Resources: All tenants use the same hardware, software, and database system, maximizing efficiency.
Data Isolation: Each tenant’s data is segregated logically, ensuring privacy and security.
Scalability: The architecture can handle multiple tenants simultaneously, with the ability to add new tenants seamlessly.
Customization: Tenants can have unique configurations, themes, or features tailored to their needs.

Multi-Tenant vs. Single-Tenant: How Do They Differ?

Feature	Multi-Tenant Applications	Single-Tenant Applications
Architecture	Shared instance for all tenants	Dedicated instance for each tenant
Resource Efficiency	Highly efficient due to shared resources	Less efficient; requires separate resources for each tenant
Cost	Lower due to shared infrastructure	Higher due to isolated environments
Customization	Limited to configurations and themes	Fully customizable per tenant
Scalability	Easily scalable by adding tenants	Scalability requires additional instances
Security	Logical data isolation	Physical data isolation

If you’re considering building a multi-tenant SaaS platform, Next.js is an excellent choice. With features like middleware, dynamic routing, and API capabilities, it provides all the tools you need to deliver tenant-specific experiences.

Why Next.js is Perfect for Multi-Tenant Applications

When building multi-tenant applications, choosing the right framework can make or break your project. Here’s why Next.js stands out:

File-based routing simplifies URL management, especially for tenant-specific pages.
Middleware allows for seamless tenant detection and request customization.
Server-Side Rendering (SSR) ensures dynamic content rendering tailored to tenants.
API routes make it easy to manage backend logic for different tenants.
Flexibility in supporting static, dynamic, and incremental static generation.

With Next.js, you can efficiently serve unique content and designs to tenants while maintaining a scalable and centralized codebase.

Step 1: Planning Your Multi-Tenant Applications with Next.js Architecture

Before writing any code, you need to define your application’s architecture. There are two common approaches:

Database per tenant: Each tenant has its own database, providing complete data isolation.
Shared database with tenant identifiers: All tenants share a single database, distinguished by a unique tenant_id field.

For simplicity, this guide will focus on a shared database model, which is commonly used for SaaS platforms.

Folder Structure

Organizing your project properly ensures scalability as your application grows. Below is a recommended structure:

project-root/
│
├── pages/
│   ├── _middleware.ts  # Middleware for tenant detection
│   ├── [tenant]/
│   │   ├── index.tsx   # Tenant-specific homepage
│   │   ├── dashboard.tsx
│   │   └── api/
│   │       └── data.ts # Tenant-specific APIs
│   ├── api/
│       ├── auth.ts     # Global APIs
│       └── users.ts
├── styles/
│   ├── global.css
│   ├── themes/         # Theme-specific styles
│       ├── tenant-a.css
│       └── tenant-b.css
└── lib/
    ├── db.ts           # Database connection logic
    └── utils.ts        # Utility functions

This setup allows for clean separation of tenant-specific and global functionality.

Step 2: Setting Up Tenant-Specific Routing

Next.js makes routing simple and scalable, thanks to its file-based routing system and middleware.

Dynamic Routes for Tenants

Create a folder named [tenant] under the pages directory. This folder will house tenant-specific pages like their homepage, dashboard, and other custom views.

// pages/[tenant]/dashboard.tsx
import { useRouter } from "next/router";

const Dashboard = () => {
  const router = useRouter();
  const { tenant } = router.query;

  return (
    <div>
      <h1>Welcome, {tenant}!</h1>
      <p>This is your dashboard.</p>
    </div>
  );
};

export default Dashboard;

This setup dynamically renders a dashboard for each tenant based on the URL, e.g., yourapp.com/tenant-a/dashboard.

Middleware for Tenant Detection

Next.js middleware lets you intercept requests and dynamically route users based on the tenant’s subdomain or URL path.

// pages/_middleware.ts
import { NextResponse, NextRequest } from "next/server";

export function middleware(req: NextRequest) {
  const hostname = req.headers.get("host");

  // Ensure hostname is valid
  if (!hostname) {
    return NextResponse.redirect(new URL("/error", req.url));
  }

  const tenant = hostname.split(".")[0]; // Extract tenant from subdomain

  // Ensure tenant exists
  if (!tenant || tenant === "www") {
    return NextResponse.redirect(new URL("/error", req.url));
  }

  // Rewrite the URL with the tenant
  const newUrl = new URL(req.url);
  newUrl.pathname = `/${tenant}${newUrl.pathname}`;

  return NextResponse.rewrite(newUrl);
}

This middleware detects the tenant based on the subdomain and rewrites the request to the appropriate tenant-specific path.

Step 3: Adding Dynamic Themes for Tenants

To offer a customized experience, each tenant can have its unique theme, such as distinct colors, fonts, or layouts.

Using CSS Variables

Define common styles and override them for specific tenants:

/* styles/global.css */
:root {
  --primary-color: #0070f3;
}

/* styles/themes/tenant-a.css */
:root {
  --primary-color: #ff5733;
}

Use the variables in your components:

const Button = () => (
  <button style={{ backgroundColor: "var(--primary-color)" }}>
    Click Me
  </button>
);

Dynamically Load Themes

Load a tenant’s theme dynamically based on the current route or subdomain:

import { useEffect } from "react";
import { useRouter } from "next/router";
import type { ReactNode } from "react";

type LayoutProps = {
  children: ReactNode;
};

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const router = useRouter();
  const { tenant } = router.query;

  useEffect(() => {
    if (!tenant) return; // Avoid executing if `tenant` is undefined

    const loadTheme = async () => {
      try {
        const theme = tenant === "tenant-a" ? "tenant-a.css" : "tenant-b.css";
        await import(`../styles/themes/${theme}`);
      } catch (error) {
        console.error("Error loading theme:", error);
      }
    };

    loadTheme();
  }, [tenant]);

  return <div>{children}</div>;
};

export default Layout;

Step 4: Building Tenant-Specific APIs

Next.js API routes simplify backend logic for tenant-specific operations.

Dynamic API Routes

Define tenant-specific APIs within the [tenant]/api folder:

// pages/[tenant]/api/data.ts
import { NextApiRequest, NextApiResponse } from "next";

// Define the structure of the data
interface TenantData {
  id: number;
  name: string;
  details: string;
}

// Dummy data for tenants
const dummyData: Record<string, TenantData[]> = {
  "tenant-a": [
    { id: 1, name: "Product A1", details: "Details of Product A1" },
    { id: 2, name: "Product A2", details: "Details of Product A2" },
  ],
  "tenant-b": [
    { id: 3, name: "Service B1", details: "Details of Service B1" },
    { id: 4, name: "Service B2", details: "Details of Service B2" },
  ],
};

// Function to fetch tenant-specific data
function getTenantData(tenant?: string): TenantData[] {
  return dummyData[tenant || ""] || [];
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
): void {
  const { tenant } = req.query;

  if (typeof tenant !== "string") {
    res.status(400).json({ error: "Invalid tenant parameter" });
    return;
  }

  const data = getTenantData(tenant);

  if (data.length === 0) {
    res.status(404).json({ error: "No data found for this tenant" });
    return;
  }

  res.status(200).json(data);
}

Global API Logic with Tenant Parameters

Alternatively, handle tenants using a tenant parameter in shared APIs:

// pages/api/users.ts
import { NextApiRequest, NextApiResponse } from "next";

interface User {
  id: number;
  name: string;
  role: string;
}

interface TenantData {
  [key: string]: User[];
}

export default function handler(req: NextApiRequest, res: NextApiResponse): void {
  const { tenant } = req.headers;

  // Dummy data for demonstration purposes
  const dummyData: TenantData = {
    "tenant-a": [
      { id: 1, name: "Alice", role: "Admin" },
      { id: 2, name: "Bob", role: "User" },
    ],
    "tenant-b": [
      { id: 3, name: "Charlie", role: "Moderator" },
      { id: 4, name: "Dave", role: "User" },
    ],
  };

  // Validate tenant
  if (typeof tenant !== "string") {
    res.status(400).json({ error: "Invalid tenant header" });
    return;
  }

  // Fetch users based on the tenant
  const users = dummyData[tenant] || [];

  // Return the response
  res.status(200).json(users);
}

FAQs

What is a multi-tenant application?

It’s a single application that serves multiple customers (tenants), offering each tenant a personalized experience while sharing a common codebase.

How does middleware enhance multi-tenancy?

Middleware in Next.js intercepts requests and allows you to dynamically route, detect tenants, and rewrite URLs for tenant-specific experiences.

Can Next.js handle large-scale multi-tenant platforms?

Absolutely! Next.js’s hybrid rendering, dynamic routing, and middleware make it scalable for enterprise-level SaaS applications.

Conclusion

Building a multi-tenant application with Next.js doesn’t have to be complicated. By leveraging its powerful features like middleware, dynamic routing, and server-side rendering, you can create a scalable, efficient, and highly customizable SaaS platform.

To dive deeper into the best practices and implementation details, check out this comprehensive guide on Building a Multi-Tenant Application with Next.js.

Ready to start your multi-tenant journey? Share your thoughts and questions in the comments below. For more JavaScript insights, check out our JavaScript Full-Stack Blog.