next-best-practices

概覽

什麼是 next-best-practices？

next-best-practices 是一套針對使用 Next.js 的前端開發者設計的完整技能。它提供可操作的最佳實踐與模式，協助打造可擴展且易於維護的 Next.js 應用程式。涵蓋從檔案慣例、React Server Component（RSC）邊界，到非同步資料擷取、錯誤處理與優化等各方面，幫助你避開常見陷阱，採用現代 Next.js 工作流程。

誰適合使用這個技能？

• 使用 Next.js 與 React 的前端開發者
• 正在遷移至 Next.js App Router 的團隊
• 希望落實或學習最新 Next.js 慣例的任何人

它解決了哪些問題？

• 明確大型 Next.js 專案的檔案與資料夾結構
• 指導 Server 與 Client Components 的正確使用方式
• 解說 Next.js 15+ 的非同步資料模式與遷移方法
• 幫助避免常見的打包與執行時錯誤
• 提供完善的錯誤處理與除錯策略

什麼時候適合使用 next-best-practices？

• 開始新的 Next.js 專案或重構現有專案時
• 新成員加入團隊並需熟悉 Next.js 慣例時
• 排查資料擷取、路由或打包問題時

使用說明

安裝步驟

1. 使用以下指令將技能加入專案：

   npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices
   

2. 開啟 SKILL.md 檔案，查看高階摘要與詳細指南連結。
3. 閱讀相關支援檔案，針對特定主題深入學習：
   • file-conventions.md：了解專案結構、路由段與特殊檔案。
   • rsc-boundaries.md：掌握有效與無效的 React Server Component 模式。
   • async-patterns.md：遷移至新的非同步 API，處理 params、cookies 與 headers。
   • data-patterns.md：選擇合適的資料擷取與變更策略。
   • error-handling.md：實作錯誤邊界與導航例外處理。
   • bundling.md：解決第三方套件的打包問題。
   • directives.md：使用 React 與 Next.js 指令，如 'use client'、'use server'、'use cache'。
   • debug-tricks.md：利用 Next.js 開發工具與端點加速除錯。

適應你的專案

• 將提供的模式作為參考，依照你的程式庫、工具鏈與部署環境調整。
• 不要直接複製程式碼，請審視每個模式是否與你的技術棧及 Next.js 版本相容。

涵蓋的主要主題

• 檔案慣例與專案結構
• RSC 邊界與元件模式
• 非同步資料擷取與遷移
• 路由處理器與執行時選擇
• 錯誤邊界與全域錯誤處理
• 圖片與字型優化
• 打包與外部依賴管理
• 除錯與開發工具

常見問題

如何預覽 next-best-practices 的內容？

安裝後，開啟 Files 標籤瀏覽所有包含的指南，如 SKILL.md、async-patterns.md、bundling.md 等。每個檔案聚焦於特定的 Next.js 最佳實踐。

next-best-practices 是否限定於特定 Next.js 版本？

此技能已更新支援 Next.js 15+，涵蓋新非同步 API 與慣例的遷移步驟。部分模式可能不適用於較舊版本。

我可以在自訂設定中使用 next-best-practices 嗎？

可以，但請審視每個模式是否與你的自訂設定相容，特別是路由、伺服器執行時與打包相關部分。

如果我需要更詳細的主題說明怎麼辦？

每個主題檔案都包含實務範例與官方 Next.js 或 React 文件的參考連結，方便深入學習。

遇到問題時我該去哪裡尋求協助？

請參考 debug-tricks.md 取得進階除錯技巧，或查閱技能檔案中連結的官方 Next.js 文件。