Next.js Shadcn UI Setup: A Dialog in Server Component crashed the build
A shadcn Dialog imported into a Server Component crashed the production build. Root cause: Radix-based shadcn components (Dialog, Popover) require `'use client'`; the build broke on first render. The fix: Wrap interactive shadcn components in their own Client Component.
A production war story from the TheCodeForge Next.js series — the incident, why it happened, and the exact fix.
⏳ Timestamps:
0:00 - Cold open: production outage
0:10 - Version Compatibility: Shadcn/ui CLI and Tailwind v4
1:13 - Production Caveat: Component Updates
1:47 - Intro
1:56 - What Is Shadcn/ui?
2:11 - Why It Matters
2:22 - Initialization Steps
2:47 - Adding Components
3:06 - Customizing Theme
3:30 - Building a Form
3:51 - Server & Client Boundaries
4:11 - Server Actions & Forms
4:34 - Responsive Layouts
4:54 - Dark Mode Implementation
5:12 - Performance Optimization
5:27 - Testing Components
5:48 - Deploying the App
6:06 - production outage
6:27 - Missing client boundary
6:42 - The Fix
6:54 - ⚠ Gotcha: Importing interactive shadcn component in Server Component
7:09 - ⚠ Gotcha: Importing from a barrel file that re-exports all components
7:19 - ⚠ Gotcha: Hardcoding Tailwind classes instead of theme variables
7:30 - Debugging Guide
7:43 - Interview Questions
8:08 - FAQ
8:30 - Key Takeaways
8:45 - Next up
9:09 - Wrap-up
👉 Full article + code: https://thecodeforge.io/javascript/ne...
⏭ Next up: Turbopack Optimization in Next.js 16: Complete Guide
#nextjs #javascript