Next.js App Router 最佳實踐：Cursor 規則檔助你打造高效應用

Reddit 用戶分享適用於 Next.js App Router 的 Cursor rules，提供了具體的開發模式和最佳實踐，直接幫助開發者在 Cursor 中更有效地使用 AI 進行網頁開發。

這篇文章分享了為 Next.js App Router 設計的 Cursor 規則檔案，旨在強制執行正確的開發模式，避免生成與 App Router 設計理念相悖的代碼。 • 核心原則是 預設使用 React Server Components，僅在需要 useState、useEffect、事件處理或瀏覽器 API 時才添加 "use client"。 • 資料獲取應在伺服器元件中進行，並嚴禁在 useEffect 中進行初始數據加載。 • 其他關鍵模式包括：禁止直接使用 process.env、所有資料庫操作應透過特定服務函數處理，以及 Zod 用於所有外部資料驗證。 • 作者也提醒要 避免捕捉並吞噬錯誤，並點出 asChild 和 useEffect 數據獲取等常見陷阱，這些都是 Cursor 在缺乏規則下容易產生的問題。這些規則源於作者六個月的 Next.js 生產環境經驗，已彙整成一份 400 多行的 .cursorrules 文件。

作者強調，僅採用文中列出的幾項規則，就能大幅提升開發品質並避免數百個不良建議。