Last week, I attended the live workshop Build a Full-Stack Next.js App v4 by Brian Holt on Frontend Masters. It was an incredible deep dive into building production-grade applications from scratch to deployment. Here is the note I took on crafting a modern full-stack Next.js application using popular tools.
Key Reference Material:
The Stack
This workshop introduced a curated tech stack optimized for serverless architecture, developer experience, and production reliability:
Next.js - The React framework with built-in SSR, SSG, and API routes
TypeScript - Type safety across the entire application
Neon PostgreSQL - Serverless Postgres with automatic scaling
Drizzle ORM - Type-safe, SQL-like database queries
Upstash Redis - Serverless caching for blazing-fast performance
Vercel - Seamless deployment and hosting
Resend - Modern transactional email
GitHub Actions - Automated CI/CD pipeline
Database Layer: Neon (Serverless Postgres) + Drizzle ORM
Neon:
Neon's built-in authentication system integrates seamlessly with Neon PostgreSQL databases, providing pre-built tables and middleware for user management. The free tier is incredibly generous because you only pay for actual usage—the database scales up on demand and scales down to zero when idle. Perfect for side projects and MVP development.
Key benefits:
Built-in authentication system with pre-configured tables
Database branching for development environments
Instant provisioning and automatic backups
Seamless Vercel integration
Drizzle ORM:
Highly "SQL-ish": Unlike ORMs that abstract SQL away, Drizzle keeps SQL logic exposed and accessible. Writing custom queries feels intuitive rather than fighting against the ORM.
Deep TypeScript Integration: Drizzle automatically generates accurate types for your entire schema, including Neon's built-in Auth tables. This saves countless hours of manual type definitions and catches errors at compile time.
Lightweight and Fast: Drizzle has minimal overhead compared to heavier ORMs, resulting in faster query execution and smaller bundle sizes.
Creating the Database Schema & Migrating:
Define your schema in db/schema.ts.
Generate migrations: npx drizzle-kit generate
Apply migrations: npx drizzle-kit migrate
For instant experimental changes, use: npx drizzle-kit push (applies whatever is in your schema instantly)
Seeding Data:
Ensure there's at least one user. (Install tsx for TypeScript-based seeds)
Add seed logic to your data script
Run tsx src/db/seed.ts to seed your database
Auth Layer: AuthN (Authentication) & AuthZ (Authorization)
File Storage for Image Upload with Vercel
Link your Next.js app repo to Vercel.
Configure a blob storage in Vercel and add the required environment variables in next.config.js.
Reference the storage (image URL) in drizzle.config.ts.
Use Vercel's upload API for image input in upload.ts.
Caching with Upstash Redis
Redis provides sub-millisecond response times—orders of magnitude faster than database queries. For frequently accessed, infrequently changed data (such as article listings or user profiles), caching dramatically improves the user experience and reduces database load.
Upstash makes Redis serverless with per-request pricing, so you're not paying for idle time.
Create your Redis project on Upstash.
Add credentials to your .env.
Add cache logic to lib/data/articles.ts.
Email Support via Resend
Resend is a developer-friendly email API that makes transactional emails painless:
Set up a custom domain (DNS records) on Resend.
Configure sender/domain options.
Create/send templated emails (e.g., celebration notice).
Send a notification when the page view count passes a threshold (e.g., >10 views triggers an email).
CI/CD Pipeline with Vercel & Neon
Add Neon integration on Vercel’s dashboard.
Add current Vercel deployment URL to Neon (especially for unique/ephemeral URL management).
Manage environment variables for staging, production, and preview branches.
Separate blob storage by environment for isolation and reliability.
Vercel provides built-in analytics and speed insights (free for one project per account):
Github Actions and Testing
Automate your workflow:
Run lint → typecheck → test:ci (unit tests) → test:e2e:ci → deploy to production.
Use GitHub secrets for per-env variables; copy carefully from Vercel except Neon (generate that API key on Neon).
Always isolate test environments—a shared cache or DB may yield false positives/failures.
Best Practices & Key Takeaways
Database & Caching
Use Redis exclusively for performance optimization, not data persistence—always persist to database periodically.
Monitor cache hit rates to validate your caching strategy
Testing & CI/CD
Deployment & Monitoring
Automate domain cleanup if deployment URLs rotate frequently
Use Vercel's analytics to monitor real-world performance and identify bottlenecks
Enable bot protection to prevent spam
Developer Experience
Drizzle's TypeScript integration catches errors at compile time, saving debugging time in production
Neon's database branching allows safe experimentation without affecting production data
Serverless architecture means you're not paying for idle resources
Vercel integrates seamlessly with different services with key management
By combining Drizzle’s type-safe ORM, Neon’s flexible Postgres, blazing-fast caching with Upstash Redis, and modern deployment with Vercel, you can ship highly scalable Next.js apps with confidence and speed.
