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.localfile in the root directory with:KV_REST_API_URL=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