Platforms Starter Kit

How to make your own 2048 game

Today, we are excited to launch the Platforms Starter Kit ↗ — a comprehensive template for building multi-tenant applications with custom domains.

What is a multi-tenant application?

Multi-tenant applications serve multiple customers across different subdomains/custom domains with a single unified codebase.

For example, this blog is a multi-tenant application:

• Subdomain: demo.vercel.pub ↗
• Custom domain: platformize.co ↗ (maps to demo.vercel.pub ↗)
• Build your own: app.vercel.pub ↗

Another example is Hashnode ↗, a popular blogging platform. Each writer has their own unique .hashnode.dev subdomain for their blog:

• eda.hashnode.dev ↗
• katycodesstuff.hashnode.dev ↗
• akoskm.hashnode.dev ↗

Users can also map custom domains to their .hashnode.dev subdomain:

• akoskm.com ↗ → akoskm.hashnode.dev ↗

Today, we’re making it easier than ever for creators to start their own platform by providing a comprehensive starter kit and announcing.

Template features

Forget manually setting up CNAME records, wrestling with DNS, or making custom server rewrite rules with NGINX. With Vercel and the Platforms Starter Kit, you can focus on building the next big thing.

• Custom domains: Subdomain and custom domains support with Edge Functions ↗ and the Vercel Domains API ↗.
• Static generation with ISR: Performance without sacrificing personalization, by combining Incremental Static Regeneration ↗ (ISR) and Middleware ↗. ISR allows you to create new content (with custom domains) on demand without needing to redeploy your application.
• Uploading custom images: Allow your customers to upload custom thumbnail images with our Cloudinary integration.
• Static tweets: Avoid Cumulative Layout Shift ↗ (CLS) from the native Twitter embed by using our static tweets implementation ↗ (supports image, video, gif, poll, retweets, quote retweets, and more).

https://twitter.com/vercel/status/1484237805941403655

Examples of platforms

Vercel customers like Hashnode ↗, Super ↗, and Cal.com ↗ are building scalable platforms on top of Vercel and Next.js. There are multiple types of platforms you can build with this starter kit:

1. Content creation platforms

These are content-heavy platforms (blogs) with simple, standardized page layouts and route structure.

“With Vercel, we spend less time managing our infrastructure and more time delivering value to our users.” — Sandeep Panda, Co-founder, Hashnode

Hashnode

Free developer blogging platform

Hashnode

Free developer blogging platform

Mirror

Blockchain-based publishing tool for writers

Mirror

Blockchain-based publishing tool for writers

Read.cv

Platform to build beautiful profiles and meaningful connections

Read.cv

Platform to build beautiful profiles and meaningful connections

2. Website & e-commerce store builders

No-code site builders with customizable pages.

By using Next.js and Vercel, Super ↗ has fast, globally distributed websites with a no-code editor (Notion). Their customers get all the benefits of Next.js (like Image Optimization ↗) without touching any code.

Super

Build simple websites with nothing but Notion

Super

Build simple websites with nothing but Notion

Typedream

The simplest way to build a website with no-code

Typedream

The simplest way to build a website with no-code

Makeswift

An easy-to-learn no-code website builder

Makeswift

An easy-to-learn no-code website builder

3. B2B2C platforms

Multi-tenant authentication, login, and access controls.

With Vercel and Next.js, platforms like Instatus ↗ are able to create status pages that are 10x faster than competitors.

Instatus

Beautiful status pages that are free forever

Instatus

Beautiful status pages that are free forever

Cal.com

Scheduling infrastructure for absolutely everyone

Cal.com

Scheduling infrastructure for absolutely everyone

Dub

Open-source link shortener w/ built-in analytics and free custom domains

Dub

Open-source link shortener w/ built-in analytics and free custom domains

Built on open source

This working demo site was built using the Platforms Starter Kit and:

• Next.js ↗ as the React framework
• Tailwind ↗ for CSS styling
• Prisma ↗ as the ORM for database access
• PlanetScale ↗ as the database (MySQL)
• NextAuth.js ↗ for authentication
• Vercel ↗ for deployment

Learn more

• Looking for an in-depth guide on how to build a multi-tenant platform? Read our step-by-step guide ↗.
• Want the code? Visit the GitHub repository ↗.