Vercel, Supabase & the Modern Developer Ecosystem

# Every PR automatically gets a URL like:
# https://my-app-git-feature-login-yourteam.vercel.app

// app/api/users/route.ts — Next.js App Router
import { NextResponse } from 'next/server';
 
export async function GET() {
  const users = await db.query('SELECT * FROM users');
  return NextResponse.json(users);
}
 
export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.insert('users', body);
  return NextResponse.json(user, { status: 201 });
}

// middleware.ts — runs at the edge (fast, global)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
  // Check authentication
  const token = request.cookies.get('session');
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
 
  // Add geolocation headers
  const country = request.geo?.country || 'US';
  const response = NextResponse.next();
  response.headers.set('x-user-country', country);
  return response;
}
 
export const config = {
  matcher: ['/dashboard/:path*', '/api/:path*'],
};

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // Revalidate every hour
 
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

import { createClient } from '@supabase/supabase-js';
 
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);
 
// Query data
const { data: posts, error } = await supabase
  .from('posts')
  .select('*, author:profiles(name, avatar_url)')
  .eq('published', true)
  .order('created_at', { ascending: false })
  .limit(10);
 
// Insert data
const { data, error: insertError } = await supabase
  .from('posts')
  .insert({
    title: 'My New Post',
    content: 'Hello world!',
    author_id: user.id,
  })
  .select()
  .single();

// Email/password sign up
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'securepassword123',
});
 
// OAuth (Google, GitHub, Discord, etc.)
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: 'https://yourapp.com/auth/callback',
  },
});
 
// Magic link (passwordless)
const { data, error } = await supabase.auth.signInWithOtp({
  email: 'user@example.com',
});
 
// Get current user
const { data: { user } } = await supabase.auth.getUser();

-- Enable RLS on posts table
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;
 
-- Anyone can read published posts
CREATE POLICY "Public can read published posts"
  ON posts FOR SELECT
  USING (published = true);
 
-- Users can only insert their own posts
CREATE POLICY "Users can insert own posts"
  ON posts FOR INSERT
  WITH CHECK (auth.uid() = author_id);
 
-- Users can only update their own posts
CREATE POLICY "Users can update own posts"
  ON posts FOR UPDATE
  USING (auth.uid() = author_id)
  WITH CHECK (auth.uid() = author_id);
 
-- Users can only delete their own posts
CREATE POLICY "Users can delete own posts"
  ON posts FOR DELETE
  USING (auth.uid() = author_id);

// Client-side: this is SAFE because RLS is enforced
// User will only see published posts (or their own)
const { data: posts } = await supabase
  .from('posts')
  .select('*');

// Subscribe to new posts
const channel = supabase
  .channel('public:posts')
  .on(
    'postgres_changes',
    { event: 'INSERT', schema: 'public', table: 'posts' },
    (payload) => {
      console.log('New post:', payload.new);
    }
  )
  .subscribe();
 
// Presence (who's online)
const presenceChannel = supabase.channel('room-1');
presenceChannel
  .on('presence', { event: 'sync' }, () => {
    const state = presenceChannel.presenceState();
    console.log('Online users:', Object.keys(state).length);
  })
  .subscribe(async (status) => {
    if (status === 'SUBSCRIBED') {
      await presenceChannel.track({ user_id: user.id, name: user.name });
    }
  });

// supabase/functions/send-welcome-email/index.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
 
serve(async (req) => {
  const { email, name } = await req.json();
 
  // Send email via Resend
  const res = await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${Deno.env.get('RESEND_API_KEY')}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      from: 'welcome@yourapp.com',
      to: email,
      subject: `Welcome, ${name}!`,
      html: `<h1>Welcome to our app, ${name}!</h1>`,
    }),
  });
 
  return new Response(JSON.stringify({ success: true }), {
    headers: { 'Content-Type': 'application/json' },
  });
});

// Upload a file
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`${user.id}/profile.png`, file, {
    cacheControl: '3600',
    upsert: true,
  });
 
// Get public URL
const { data: { publicUrl } } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${user.id}/profile.png`);

// app/layout.tsx — Clerk with Next.js
import { ClerkProvider } from '@clerk/nextjs';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html>
        <body>{children}</body>
      </html>
    </ClerkProvider>
  );
}

// app/dashboard/page.tsx — protected route
import { auth } from '@clerk/nextjs/server';
import { redirect } from 'next/navigation';
 
export default async function DashboardPage() {
  const { userId } = await auth();
  if (!userId) redirect('/sign-in');
 
  return <h1>Welcome to your dashboard</h1>;
}

// auth.ts — Auth.js configuration
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
import Google from 'next-auth/providers/google';
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    GitHub({ clientId: process.env.GITHUB_ID!, clientSecret: process.env.GITHUB_SECRET! }),
    Google({ clientId: process.env.GOOGLE_ID!, clientSecret: process.env.GOOGLE_SECRET! }),
  ],
});

// db/schema.ts — Drizzle schema
import { pgTable, serial, text, boolean, timestamp } from 'drizzle-orm/pg-core';
 
export const posts = pgTable('posts', {
  id: serial('id').primaryKey(),
  title: text('title').notNull(),
  content: text('content').notNull(),
  published: boolean('published').default(false),
  authorId: text('author_id').notNull(),
  createdAt: timestamp('created_at').defaultNow(),
});

// Query with full type safety
import { db } from './db';
import { posts } from './db/schema';
import { eq, desc } from 'drizzle-orm';
 
const publishedPosts = await db
  .select()
  .from(posts)
  .where(eq(posts.published, true))
  .orderBy(desc(posts.createdAt))
  .limit(10);
// TypeScript knows the exact shape of publishedPosts

// prisma/schema.prisma
model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String
  published Boolean  @default(false)
  authorId  String
  createdAt DateTime @default(now())
  author    User     @relation(fields: [authorId], references: [id])
}

// Query with Prisma
const publishedPosts = await prisma.post.findMany({
  where: { published: true },
  orderBy: { createdAt: 'desc' },
  take: 10,
  include: { author: true },
});

// Rate limiting with Upstash
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';
 
const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, '10 s'), // 10 requests per 10 seconds
});
 
// In your API route
export async function POST(request: Request) {
  const ip = request.headers.get('x-forwarded-for') || 'unknown';
  const { success, limit, remaining } = await ratelimit.limit(ip);
 
  if (!success) {
    return new Response('Too many requests', { status: 429 });
  }
 
  // Process request...
}

// Caching with Upstash Redis
import { Redis } from '@upstash/redis';
 
const redis = Redis.fromEnv();
 
export async function getPost(slug: string) {
  // Check cache first
  const cached = await redis.get<Post>(`post:${slug}`);
  if (cached) return cached;
 
  // Fetch from database
  const post = await db.query.posts.findFirst({
    where: eq(posts.slug, slug),
  });
 
  // Cache for 1 hour
  await redis.set(`post:${slug}`, post, { ex: 3600 });
  return post;
}

// emails/welcome.tsx — React Email template
import { Html, Head, Body, Container, Text, Button } from '@react-email/components';
 
export function WelcomeEmail({ name, loginUrl }: { name: string; loginUrl: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'sans-serif', background: '#f4f4f5' }}>
        <Container style={{ maxWidth: '480px', margin: '0 auto', padding: '20px' }}>
          <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
            Welcome, {name}!
          </Text>
          <Text>Thanks for signing up. Click below to get started:</Text>
          <Button
            href={loginUrl}
            style={{ background: '#000', color: '#fff', padding: '12px 24px', borderRadius: '6px' }}
          >
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

// Send email with Resend
import { Resend } from 'resend';
import { WelcomeEmail } from '@/emails/welcome';
 
const resend = new Resend(process.env.RESEND_API_KEY);
 
await resend.emails.send({
  from: 'App <hello@yourapp.com>',
  to: user.email,
  subject: 'Welcome to Our App!',
  react: WelcomeEmail({ name: user.name, loginUrl: 'https://yourapp.com/dashboard' }),
});

// app/api/checkout/route.ts — Create Stripe checkout session
import Stripe from 'stripe';
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
 
export async function POST(request: Request) {
  const { priceId } = await request.json();
 
  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_URL}/dashboard?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
  });
 
  return Response.json({ url: session.url });
}

// app/api/webhooks/stripe/route.ts — Handle Stripe webhooks
import Stripe from 'stripe';
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
 
export async function POST(request: Request) {
  const body = await request.text();
  const signature = request.headers.get('stripe-signature')!;
 
  const event = stripe.webhooks.constructEvent(
    body,
    signature,
    process.env.STRIPE_WEBHOOK_SECRET!
  );
 
  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object;
      // Activate user's subscription in your database
      await activateSubscription(session.customer as string);
      break;
 
    case 'customer.subscription.deleted':
      const subscription = event.data.object;
      // Deactivate subscription
      await deactivateSubscription(subscription.customer as string);
      break;
  }
 
  return Response.json({ received: true });
}

# Create Next.js project
npx create-next-app@latest my-saas-app --typescript --tailwind --app --src-dir
 
cd my-saas-app
 
# Install ecosystem packages
npm install @supabase/supabase-js @clerk/nextjs @upstash/redis @upstash/ratelimit resend stripe
npm install drizzle-orm postgres
npm install -D drizzle-kit

# .env.local
 
# Vercel (auto-populated when deployed)
NEXT_PUBLIC_URL=http://localhost:3000
 
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...
 
# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
 
# Upstash
UPSTASH_REDIS_REST_URL=https://xxxxx.upstash.io
UPSTASH_REDIS_REST_TOKEN=AXxx...
 
# Resend
RESEND_API_KEY=re_...
 
# Stripe
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

// src/db/schema.ts
import { pgTable, text, timestamp, boolean, integer } from 'drizzle-orm/pg-core';
 
export const profiles = pgTable('profiles', {
  id: text('id').primaryKey(), // Clerk user ID
  email: text('email').notNull().unique(),
  name: text('name'),
  avatarUrl: text('avatar_url'),
  stripeCustomerId: text('stripe_customer_id'),
  plan: text('plan').default('free'), // 'free' | 'pro' | 'team'
  createdAt: timestamp('created_at').defaultNow(),
  updatedAt: timestamp('updated_at').defaultNow(),
});
 
export const projects = pgTable('projects', {
  id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
  name: text('name').notNull(),
  description: text('description'),
  ownerId: text('owner_id').notNull().references(() => profiles.id),
  isPublic: boolean('is_public').default(false),
  createdAt: timestamp('created_at').defaultNow(),
});
 
export const apiKeys = pgTable('api_keys', {
  id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
  projectId: text('project_id').notNull().references(() => projects.id),
  name: text('name').notNull(),
  key: text('key').notNull().unique(),
  lastUsedAt: timestamp('last_used_at'),
  requestCount: integer('request_count').default(0),
  createdAt: timestamp('created_at').defaultNow(),
});

// src/middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
 
const isPublicRoute = createRouteMatcher([
  '/',
  '/pricing',
  '/blog(.*)',
  '/sign-in(.*)',
  '/sign-up(.*)',
  '/api/webhooks(.*)',
]);
 
export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    await auth.protect();
  }
});
 
export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

// src/app/api/projects/route.ts
import { auth } from '@clerk/nextjs/server';
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';
import { db } from '@/db';
import { projects } from '@/db/schema';
import { eq } from 'drizzle-orm';
 
const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(20, '60 s'),
});
 
export async function GET() {
  const { userId } = await auth();
  if (!userId) return new Response('Unauthorized', { status: 401 });
 
  // Rate limit
  const { success } = await ratelimit.limit(userId);
  if (!success) return new Response('Too many requests', { status: 429 });
 
  const userProjects = await db
    .select()
    .from(projects)
    .where(eq(projects.ownerId, userId));
 
  return Response.json(userProjects);
}
 
export async function POST(request: Request) {
  const { userId } = await auth();
  if (!userId) return new Response('Unauthorized', { status: 401 });
 
  const { name, description } = await request.json();
 
  const [project] = await db
    .insert(projects)
    .values({ name, description, ownerId: userId })
    .returning();
 
  return Response.json(project, { status: 201 });
}

# Install Vercel CLI
npm install -g vercel
 
# Link to Vercel project
vercel link
 
# Add environment variables
vercel env add SUPABASE_SERVICE_ROLE_KEY
vercel env add CLERK_SECRET_KEY
vercel env add STRIPE_SECRET_KEY
# ... (or add via Vercel Dashboard → Settings → Environment Variables)
 
# Deploy
vercel --prod
# Or just push to GitHub — Vercel auto-deploys

# Next.js works anywhere Node.js runs
npm run build
npm run start  # Standard Node.js server
 
# Or use Docker
docker build -t my-app .
docker run -p 3000:3000 my-app

# Use Vercel's environment variable system
# Separate values for Production, Preview, and Development
 
# .env.local → Local development only (never committed)
# Vercel Dashboard → Production environment variables
# Vercel Dashboard → Preview environment variables (for PR deployments)

# Supabase branching (via CLI)
supabase db branch create feature-new-schema
 
# Neon branching (via CLI or API)
neonctl branches create --name feature-new-schema

// types/database.ts — generated from your schema
import { InferSelectModel, InferInsertModel } from 'drizzle-orm';
import { profiles, projects } from '@/db/schema';
 
export type Profile = InferSelectModel<typeof profiles>;
export type NewProfile = InferInsertModel<typeof profiles>;
export type Project = InferSelectModel<typeof projects>;
export type NewProject = InferInsertModel<typeof projects>;

// lib/safe-action.ts — type-safe server actions
export async function safeAction<T>(
  fn: () => Promise<T>
): Promise<{ data: T; error: null } | { data: null; error: string }> {
  try {
    const data = await fn();
    return { data, error: null };
  } catch (err) {
    console.error(err);
    return { data: null, error: err instanceof Error ? err.message : 'Unknown error' };
  }
}

// Instrument your app with Sentry
// next.config.mjs
import { withSentryConfig } from '@sentry/nextjs';
 
export default withSentryConfig(nextConfig, {
  org: 'your-org',
  project: 'your-project',
  silent: true,
});