資深開發者 Brad Traversy 分享了他目前從開發到部署的完整技術棧選擇。他以 20 年的開發經驗為基礎，說明為什麼選擇 TypeScript、Next.js、Tailwind CSS、PostgreSQL 和 Prisma 這套組合，並分享他如何善用 Claude Code 作為 AI 輔助工具，同時展示多個使用該技術棧打造的實際專案。

原影片連結：https://www.youtube.com/watch?v=oIx7ObcfdlU

影片重點

• TypeScript strict mode 是個人專案的首選語言，雖然一開始很排斥
• Next.js 搭配 React 是主要框架，小工具則用 React + Vite
• Tailwind CSS 已完全取代手寫 CSS，兩年多沒寫過原生 CSS
• 從 MongoDB 轉向 PostgreSQL（Neon），因為 MongoDB 費用太高
• Prisma 作為 ORM，搭配 Prisma Studio 管理資料
• 前端部署用 Vercel，後端 API 部署用 Render.com
• AI 輔助使用 Claude Code，強調 context engineering 而非純粹 vibe coding
• 純 vibe coding 打造大型應用最終會失敗，需要手動寫程式和測試

詳細內容

[00:00] 開場與背景介紹

Brad Traversy 表示自己從事開發約 20 年，內容創作約 10 年。在這段時間裡，他嘗試過數百種不同的技術，從程式語言到框架再到各種小工具。他強調這只是他「目前」的技術棧，不代表永遠不變，也不代表適合所有人。每個人應根據自己的需求選擇合適的工具。

[01:05] 程式語言：TypeScript（嚴格模式）

Brad 選擇 TypeScript 並開啟 strict mode。雖然他在教學課程中常用 JavaScript，但個人專案一律使用 TypeScript。他坦言一開始其實很討厭 TypeScript，覺得額外的型別標註不值得投資。但隨著專案規模增長，他開始體會到 TypeScript 的價值：能在上線前捕捉錯誤、IntelliSense 提示非常好用、程式碼具有自文件化（self-documenting）的特性，而且 TypeScript 已經成為業界標準，不管是前端或 Node.js 專案幾乎都在用。

[02:15] 框架：Next.js 搭配 React

他的主要框架選擇是 Next.js（基於 React）。Brad 坦言他不是在說 React 是最好的前端框架，而是因為他最熟悉 React，所以選擇它。他也了解 Vue 和 Angular，但 React 是他最得心應手的。

對於小型工具，他會使用 React + Vite 來建構 SPA（單頁應用程式）。例如他做的 JavaScript bundle analyzer 只有兩個路由，不需要 SEO，就直接用 Vite。但較大型的應用則使用 Next.js，利用 API routes 或 server actions，頁面預設在伺服器端渲染，只有需要互動功能時才改為 client component。

[03:35] 樣式：Tailwind CSS

Brad 使用 Tailwind CSS，偶爾搭配 shadcn/ui 元件庫。他表示除了教學以外，大概已經兩年沒寫過原生 CSS 了。Tailwind 大幅減輕了樣式的負擔。他知道有人會抱怨 HTML 中堆滿 class 名稱，但他認為這是值得的取捨。

[04:10] 資料庫：PostgreSQL（Neon）+ Prisma

資料庫方面，Brad 從 MongoDB 轉向了 PostgreSQL，具體使用 Neon 的雲端服務。他提到之前使用 MongoDB 時費用非常高昂——他的 MERN stack 課程的示範電商應用（Pro Shop）每月竟然產生 600 美元的費用，而且那只是一個示範應用，並非真正的生產環境。

Neon 提供穩定的定價，而且支援資料庫分支（branching）功能，讓他在開發時不必擔心影響到生產資料。在 ORM 方面，他使用 Prisma，雖然 Drizzle 也不錯，但他已經習慣 Prisma 的操作方式。Prisma 讓資料建模和遷移都很方便，加上 Prisma Studio 可以直觀地查看和管理資料。

[05:40] 部署：Vercel + Render.com

前端部署使用 Vercel，也就是 Next.js 的創建者。Vercel 內建持續部署（CI/CD），只要推送到 GitHub 的 main branch，就會自動建置和部署，流程非常簡單。Brad 回想起過去使用 FileZilla FTP 和 cPanel 的日子，感嘆如今的部署體驗已經進步了多少——不用再把整個專案拖進 FTP 視窗等 45 分鐘，也不用擔心沒有備份和版本控制。

後端 API 部署則使用 Render.com，它讓部署 web services 和 API 跟前端一樣簡單，只需匯入 GitHub repo 即可，比自己維護 DigitalOcean 伺服器輕鬆許多。

[06:30] 測試與 CI/CD

測試方面，Brad 坦言自己不常寫測試，但需要時會用 Jest。自動化部分（執行測試、linting、建置）則透過 GitHub Actions 處理。

[06:45] AI 輔助：Claude Code

Brad 目前使用 Claude Code 作為 AI 輔助工具。他之前用 Cursor，但認為 Claude Code 是目前最好的 agentic AI 工具，所以回到了普通的 VS Code 搭配 Claude Code 擴充套件。

他特別強調自己不太做 vibe coding——也就是讓 AI 隨意發揮、只給幾個 prompt 就好。相反地，他會精心建構 context 和規則，透過多個 project context files 描述他的 coding style、架構、目標，然後與 Claude 協作。他會手動寫程式碼、手動測試，同時讓 AI 審查冗餘程式碼、潛在 bug 或更好的設計模式。

[08:00] 實際專案展示：WebUtils.io

第一個展示的專案是 webutils.io，一個集合各種小工具的平台，包括 PDF 分割合併、檔案壓縮、favicon 產生、假資料生成等。開發工具類則有 diff 比較、Flexbox/Grid 產生器、.gitignore 建立器、TypeScript interface 建立器等。

這些工具 90% 都在客戶端執行，所以速度非常快。免費使用，不需註冊，但註冊後可以加入收藏方便存取。身份驗證使用 NextAuth，支援 Google 登入和 email 密碼。他也建了管理後台來管理使用者和工具。

[09:15] 實際專案展示：DevSheets.io

第二個專案是 devsheets.io，提供各種技術的 cheat sheet。Brad 與 Claude Code 協作，設計這些 cheat sheet 的內容，每個概念都有快速參考和詳細範例。目前有 Git、TypeScript、Python、Express、DOM 操作甚至 AI prompting 的 cheat sheet，未來計劃擴展到數百個。

[09:55] 實際專案展示：健康追蹤 SaaS

Brad 還在開發一個健康領域的 SaaS 產品——症狀追蹤器，提供各種分析和 AI 洞察（使用 GPT-4o mini 模型），幫助使用者找出症狀之間的關聯。他提到需要特別注意不能替人診斷疾病，未來會有付費進階功能。

這個專案讓他學到了重要的一課：他一開始用純 vibe coding 的方式開發，結果各種錯誤被隱藏，修一個又壞另一個，最後變成一團亂。這教會他不能只靠 prompt 就想建出大型應用程式，必須親自進去寫程式碼、手動測試。

[11:00] 其他專案：APIMocker.com 與 APIProbe.dev

有些專案不適合用 Next.js，例如他建的 ApiMocker.com——一個類似 JSONPlaceholder 的假 REST API 工具，但可以實際 CRUD 並持久化資料。這個專案用 Express 加上一些小型 library，前端只是 public 資料夾裡的一個 HTML 頁面。

另一個是 APIProbe.dev，一個類似 Postman 的開源 HTTP 請求工具，可以發送請求、設定 header、建立不同環境。這兩個工具都是開源的，歡迎社群貢獻。

[12:00] 結語

Brad 再次強調，如果你目前的技術棧運作良好，不需要改變。但如果你正在掙扎，可以試試他推薦的這些工具。

我的想法

Brad Traversy 的技術棧選擇反映了一個務實的資深開發者思維：不追最新的潮流，而是選擇自己最熟悉、生態系最成熟的工具。他從 MongoDB 轉向 PostgreSQL 的原因很有說服力——一個示範應用每月 600 美元的費用確實令人咋舌，這提醒我們在選擇雲端服務時必須認真評估定價模式。

最值得注意的是他對 AI 輔助開發的態度。作為一個擁有 20 年經驗的開發者，他沒有盲目擁抱 vibe coding，而是強調 context engineering 的重要性——建立結構化的 project context files 來引導 AI，而非讓 AI 自行發揮。他親身經歷過純 vibe coding 的失敗，最終認知到大型專案仍然需要人工介入。這對目前 AI 輔助開發的討論是一個很好的參考：AI 是強大的協作夥伴，但不是萬能的自動化工具。

另外值得一提的是他的部署選擇——Vercel 搭配 Render.com 的組合讓前後端都能享受到 git push 即部署的便利，這在降低維運負擔方面確實很有價值，特別適合獨立開發者或小型團隊。