المهارات nextjs-best-practices
📦

nextjs-best-practices

آمن

掌握 Next.js App Router 最佳實踐

有信心建置生產級 Next.js 應用程式。學習可擴展的 Server Components、資料獲取策略和路由模式。

يدعم: Claude Codex Code(CC)
📊 71 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "nextjs-best-practices". 我應該在 Server Component 中使用 useState 嗎？

النتيجة المتوقعة:

不應該。Server Components 無法使用 useState、useEffect 或事件處理器。這些 hooks 需要瀏覽器 JavaScript。如果你需要狀態，請用 'use client' 標記該元件，或將互動部分提取到獨立的 Client Component 中。

استخدام "nextjs-best-practices". 如何在 Next.js 中快取 API 回應？

النتيجة المتوقعة:

使用 fetch 選項：fetch(url, { next: { revalidate: 60 } }) 會快取 60 秒。對於靜態內容，省略 revalidate 以使用建置時快取。使用 'no-store' 完全停用快取。

استخدام "nextjs-best-practices". loading.tsx 的目的是什麼？

النتيجة المتوقعة:

loading.tsx 在導覽和資料獲取期間提供自動載入狀態。它在新 segment 載入時渲染，提升感知效能。將它放在任何路由 segment 中 page.tsx 的旁邊。

التدقيق الأمني

آمن
v2 • 2/24/2026

This skill is documentation-only content describing Next.js App Router best practices. Static analysis flagged 18 patterns (external_commands, weak cryptographic algorithms), but all are FALSE POSITIVES. The SKILL.md file contains only educational markdown content with code examples - no executable code, no shell commands, no cryptographic operations. Safe for publication.

1
الملفات التي تم فحصها
209
الأسطر التي تم تحليلها
0
النتائج
2
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
31
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

從 Pages 遷移至 App Router

將現有的 Next.js 專案遷移至 App Router 架構，並採用適當的 Server Component 模式。

建置全新的 Next.js 應用程式

從第一天起就以正確的資料夾結構、快取策略和元件架構開始新專案。

程式碼審查與優化

審查現有程式碼庫中的反模式，例如不必要的 Client Components 或缺少載入狀態。

جرّب هذه الموجهات

元件類型決策 
我有一個顯示使用者個人資料並包含追蹤按鈕的元件。這應該是 Server Component 還是 Client Component？請解釋原因。
資料獲取策略 
顯示每 5 分鐘更新一次的產品列表，推薦的 fetch 模式是什麼？請展示實作方式。
路由組織 
我如何組織一個包含多個區塊（分析、設定、使用者）的儀表板，這些區塊共用相同的佈局但不應影響 URL 結構？
完整功能實作 
使用 Server Actions 建立一個留言表單。包含使用 Zod 的輸入驗證、optimistic UI 更新和錯誤處理。同時展示 Server Component 和 Client Component 的程式碼。

أفضل الممارسات

  • 預設從 Server Components 開始，僅在需要互動性時加入 Client Components
  • 使用帶括號的 route groups 組織路由而不影響 URL 路徑
  • 為每個主要路由 segment 實作 loading.tsx 和 error.tsx 以處理 pending 和錯誤狀態

تجنب

  • 為每個元件加入 'use client' - 這違背了 Server Components 的目的並增加 bundle 大小
  • 在 Client Components 中獲取資料而不是 Server Components - 會導致 waterfall 請求和更慢的載入
  • 跳過適當的 error boundaries - 未處理的錯誤會導致整個應用程式崩潰，而不是顯示後備 UI

الأسئلة المتكررة

我應該何時使用 Server Components 與 Client Components？
預設使用 Server Components 進行資料獲取、佈局和靜態內容。僅在需要 useState、useEffect、事件處理器或瀏覽器 API 時使用 Client Components。拆分大型元件以保持 Client 部分最小化。
App Router 中的快取如何運作？
Next.js 預設快取 fetch 請求。使用 revalidate 進行基於時間的重新驗證（ISR），使用 revalidatePath 或 revalidateTag 進行按需更新，使用 no-store 停用快取。每個 route segment 也可以有自己的快取設定。
什麼是 Server Actions，我應該何時使用它們？
Server Actions 是標記為 'use server' 並在伺服器上運行的 async 函式。將它們用於表單提交、資料變更和觸發重新驗證。務必驗證輸入並妥善處理錯誤。
如何在 App Router 中處理認證？
在渲染受保護的內容之前，在 Server Components 中檢查認證。使用 middleware 進行路由層級的保護。對於 Client Components，從 Server Component 獲取認證狀態或使用客戶端認證提供者。
layout.tsx 和 template.tsx 有什麼區別？
layout.tsx 在導覽過程中持續存在並維持狀態。template.tsx 在每次導覽時建立新實例，重新掛載子元件。對導覽等持續性 UI 使用 layout，在需要重置行為時使用 template。
我可以在 App Router 中使用 API routes 嗎？
可以。在 app 目錄中建立 route.ts 檔案，並使用 GET、POST、PUT、PATCH、DELETE 處理器。對 API endpoints 使用 Route Handlers。對於簡單的 endpoints，考慮使用 Edge runtime 以獲得更好的效能。

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-best-practices

مرجع

main

بنية الملفات

📄 SKILL.md