A production-ready example of a multi-tenant application built with Next.js 15, featuring custom subdomains for each tenant.
- ✅ Custom subdomain routing with Next.js middleware
- ✅ Tenant-specific content and pages
- ✅ Shared components and layouts across tenants
- ✅ Redis for tenant data storage
- ✅ Admin interface for managing tenants
- ✅ Emoji support for tenant branding
- ✅ Support for local development with subdomains
- ✅ Compatible with Vercel preview deployments
- Next.js 15 with App Router
- React 19
- Upstash Redis for data storage
- Tailwind 4 for styling
- shadcn/ui for the design system
- Node.js 18.17.0 or later
- pnpm (recommended) or npm/yarn
- Upstash Redis account (for production)
-
Clone the repository:
git clone https://github.com/vercel/platforms.git cd platforms
-
Install dependencies:
pnpm install
-
Set up environment variables: Create a
.env.local
file in the root directory with:KV_REST_API_TOKEN=your_redis_url KV_REST_API_TOKEN=your_redis_token
-
Start the development server:
pnpm dev
-
Access the application:
- Main site: http://localhost:3000
- Admin panel: http://localhost:3000/admin
- Tenants: http://[tenant-name].localhost:3000
This application demonstrates a subdomain-based multi-tenant architecture where:
- Each tenant gets their own subdomain (
tenant.yourdomain.com
) - The middleware handles routing requests to the correct tenant
- Tenant data is stored in Redis using a
subdomain:{name}
key pattern - The main domain hosts the landing page and admin interface
- Subdomains are dynamically mapped to tenant-specific content
The middleware (middleware.ts
) intelligently detects subdomains across various environments (local development, production, and Vercel preview deployments).
This application is designed to be deployed on Vercel. To deploy:
- Push your repository to GitHub
- Connect your repository to Vercel
- Configure environment variables
- Deploy
For custom domains, make sure to:
- Add your root domain to Vercel
- Set up a wildcard DNS record (
*.yourdomain.com
) on Vercel