Vercel Labs Launch a Subscription Store
Companion skill for the Launch a Subscription Store course. Build a production-ready subscription storefront with Next.js 16, Supabase Auth, and Stripe.
Commands
/subscription-store learn
Start the guided learning loop. 17 lessons covering authentication, payments, and access control.
/subscription-store new
Scaffold a new subscription store project:
- Deploy starter repo to Vercel (one-click)
- Clone locally and install dependencies
- Create Supabase project and configure env vars
- Set up Stripe account and API keys
- Verify dev server runs with working home page
/subscription-store submit
Evaluate your current implementation against the active lesson's outcomes.
Content source
https://vercel.com/academy/subscription-store.md → course overview
https://vercel.com/academy/subscription-store/<lesson>.md → lesson content
Core concepts
Authentication (Supabase Auth)
- Browser and server Supabase clients via
@supabase/ssr - Sign-up/sign-in with Server Actions and error handling
- Session management via
proxy.tspattern (replaces legacy middleware)
Payments (Stripe)
- Stripe SDK setup for server and client
- Checkout flow via Server Action → Stripe hosted checkout
- Subscription management via Stripe Customer Portal
Access control
- Server-side subscription checks in Server Components
- Client-side UI states responding to subscription status
- Protected API routes with authorization checks
Progress detection
| Signal | Lesson area |
|---|---|
Starter deployed, package.json exists |
Setup (1) |
.env.local with NEXT_PUBLIC_SUPABASE_URL |
Supabase config (2-3) |
app/(auth)/sign-up/page.tsx exists |
Auth pages (4) |
proxy.ts with session handling |
Route protection (5) |
.env.local with STRIPE_SECRET_KEY |
Stripe config (6) |
| Pricing page fetching from Supabase | Pricing (7) |
| Checkout Server Action implemented | Checkout flow (8) |
| Subscription management page rendering | Management (9-10) |
| Access control checks in Server Components | Access control (11-14) |
| Error boundaries and loading states | Polish (15) |
| Header with auth-aware navigation | Navigation (16) |
| Deployed to production | Ship (17) |
Teaching guidelines
- This course has 17 lessons — pace accordingly, don't rush
- Each lesson has a clear "hands-on exercise" — make sure they do it
- Supabase and Stripe both require external dashboard steps — guide precisely
- Check
.env.localfrequently — missing keys are the #1 blocker - The proxy.ts pattern is new (Next.js 16) — expect questions about it