platforms - GitLite

KO | EN

gitlite — search

#python #react #typescript #golang #machine-learning #rust #macos #nodejs #windows #awesome #kubernetes #awesome-list #security #openai

platforms

(★ 6,704)

A full-stack Next.js app with multi-tenancy.

File Explorer

Download Latest Version (.zip)

- - dashboard.tsx
  - page.tsx
- actions.ts
- favicon.ico
- globals.css
- layout.tsx
- not-found.tsx
- page.tsx
- subdomain-form.tsx
- - button.tsx
  - card.tsx
  - dialog.tsx
  - emoji-picker.tsx
  - input.tsx
  - label.tsx
  - popover.tsx
- redis.ts
- subdomains.ts
- utils.ts
.gitignore
components.json
next-env.d.ts
next.config.ts
package.json
pnpm-lock.yaml
postcss.config.mjs
proxy.ts
README.md
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/vercel/platforms

Downloads the entire project code from GitHub to your computer.

cd platforms

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

pnpm install

Downloads and installs the libraries listed in package.json.

pnpm dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Next.js Multi-Tenant Example

A production-ready example of a multi-tenant application built with Next.js 16, featuring custom subdomains for each tenant.

## Features

- ✅ Custom subdomain routing with Next.js proxy
- ✅ 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

## Tech Stack

- [Next.js 16](https://nextjs.org/) with App Router
- [React 19](https://react.dev/)
- [Upstash Redis](https://upstash.com/) for data storage
- [Tailwind 4](https://tailwindcss.com/) for styling
- [shadcn/ui](https://ui.shadcn.com/) for the design system

## Getting Started

### Prerequisites

- Node.js 20.9.0 or later
- pnpm (recommended) or npm/yarn
- Upstash Redis account (for production)

### Installation

1. Clone the repository:

```bash
   git clone https://github.com/vercel/platforms.git
   cd platforms
   ```

2. Install dependencies:

```bash
   pnpm install
   ```

3. Set up environment variables:
   Create a `.env.local` file in the root directory with:

```
   KV_REST_API_URL=your_redis_url
   KV_REST_API_TOKEN=your_redis_token
   ```

4. Start the development server:

```bash
   pnpm dev
   ```

5. Access the application:
   - Main site: http://localhost:3000
   - Admin panel: http://localhost:3000/admin
   - Tenants: http://[tenant-name].localhost:3000

## Multi-Tenant Architecture

This application demonstrates a subdomain-based multi-tenant architecture where:

- Each tenant gets their own subdomain (`tenant.yourdomain.com`)
- The proxy 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 proxy (`proxy.ts`, the Next.js 16 replacement for `middleware.ts`) intelligently detects subdomains across various environments (local development, production, and Vercel preview deployments).

## Deployment

This application is designed to be deployed on Vercel. To deploy:

1. Push your repository to GitHub
2. Connect your repository to Vercel
3. Configure environment variables
4. Deploy

For custom domains, make sure to:

1. Add your root domain to Vercel
2. Set up a wildcard DNS record (`*.yourdomain.com`) on Vercel