المهارات next-js-patterns
🟢
next-js-patterns
آمن 🌐
الوصول إلى الشبكة📁
الوصول إلى نظام الملفات⚙️
الأوامر الخارجية
應用 Next.js App Router 模式
取得 Next.js 15 App Router 的最佳實踐，包括伺服器元件、布局和導航模式。使用適當的架構建構現代 React 應用程式。
يدعم: Claude Codex Code(CC)
1
تنزيل ZIP المهارة
2
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
3
فعّل وابدأ الاستخدام
اختبرها
استخدام "next-js-patterns". 如何建立新的儀表板頁面？
النتيجة المتوقعة:
- 建立 app/dashboard/page.tsx
- 預設將函式匯出為伺服器元件
- 僅在需要狀態或副作用時使用 use client 指令
- 使用 Link 元件進行內部導航
- 匯出中繼資料以進行 SEO
استخدام "next-js-patterns". 何時應使用伺服器元件而非客戶端元件？
النتيجة المتوقعة:
- 預設使用伺服器元件以獲得更好的效能
- 當需要 useState 或 useEffect 時使用客戶端元件
- 為事件處理程式和瀏覽器 API 使用客戶端元件
- 將客戶端邏輯保持在獨立元件中
التدقيق الأمني
آمنv5 • 1/16/2026
Pure documentation skill containing markdown documentation for Next.js patterns. No executable code, network calls, or file system access. The static analyzer flagged JSON string patterns as cryptographic/network threats, but these are metadata fields in a configuration file. This skill only provides guidance documentation.
2
الملفات التي تم فحصها
222
الأسطر التي تم تحليلها
3
النتائج
5
إجمالي عمليات التدقيق
عوامل الخطر
🌐 الوصول إلى الشبكة (2)
📁 الوصول إلى نظام الملفات (1)
⚙️ الأوامر الخارجية (22)
تم تدقيقه بواسطة: claude عرض سجل التدقيق →
درجة الجودة
38
الهندسة المعمارية
100
قابلية الصيانة
85
المحتوى
21
المجتمع
100
الأمان
83
الامتثال للمواصفات
ماذا يمكنك بناءه
學習 App Router 基礎
了解 Next.js 15 中的頁面布局、元件類型和導航
應用伺服器資料模式
在伺服器元件中獲取資料並處理客戶端資料需求
建構 Next.js 專案架構
設計適當的路由布局、中繼資料和字體優化
جرّب هذه الموجهات
基本頁面設置
展示如何在 Next.js App Router 中建立具有正確伺服器元件結構的新頁面
客戶端互動
如何在 Next.js App Router 中建立用於狀態管理的客戶端元件
導航流程
在 Next.js 中，Link 和 useRouter 用於導航有何區別
資料獲取
展示在伺服器元件與客戶端元件中獲取資料的最佳實踐
أفضل الممارسات
- 預設使用伺服器元件以獲得更好的效能和安全性
- 對所有內部導航連結使用 next/link 的 Link 元件
- 使用 use client 指令將客戶端邏輯保持在獨立元件中
- 在頁面或布局層級定義中繼資料以進行 SEO 優化
تجنب
- 避免在 Link 元件足夠時使用 useRouter
- 不要不必要地將所有元件設為客戶端元件
- 避免在客戶端元件中獲取資料，而應由伺服器元件處理
الأسئلة المتكررة
哪些版本的 Next.js 支援 App Router？
Next.js 13 及更高版本支援 App Router。此技能專注於 Next.js 15 模式。
支援的最大嵌套路由數量是多少？
Next.js 支援深度嵌套。實際限制取決於專案複雜度和檔案組織。
如何與現有專案整合？
將模式套用至 app 目錄中的新路由。App Router 可以與 pages 目錄共存。
此技能是否存取任何外部資料？
否。此技能僅提供文件。不會讀取、寫入或傳輸任何資料。
為什麼我的頁面在導航時未更新？
確保使用 Link 進行導航。使用 useRouter 的客戶端元件必須正確包裝。
這與 pages router 相比如何？
App Router 預設提供伺服器元件、嵌套布局和串流。Pages router 仍然受到支援。