next-js-patterns
تطبيق أنماط App Router في Next.js
احصل على أفضل الممارسات لـ Next.js 15 App Router بما في ذلك Server Components وlayouts وأنماط التنقل. ابنِ تطبيقات React حديثة بهندسة صحيحة.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「next-js-patterns」。 How do I create a new dashboard page?
預期結果:
- Create app/dashboard/page.tsx
- Export default function as Server Component by default
- Use use client directive only for state or effects
- Add Link components for internal navigation
- Export metadata for SEO
正在使用「next-js-patterns」。 When should I use Server Components vs Client Components?
預期結果:
- Use Server Components by default for better performance
- Use Client Components when you need useState or useEffect
- Use Client Components for event handlers and browser APIs
- Keep client-side logic in separate components
安全審計
安全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)
📁 檔案系統存取 (1)
品質評分
你能建構什麼
تعلّم أساسيات App Router
فهم تخطيطات الصفحات وأنواع المكوّنات والتنقل في Next.js 15
تطبيق أنماط بيانات الخادم
جلب البيانات في Server Components والتعامل مع احتياجات البيانات على جهة العميل
هيكلة مشاريع Next.js
تصميم تخطيطات المسارات والـ metadata وتحسين الخطوط بشكل صحيح
試試這些提示
أرني كيفية إنشاء صفحة جديدة في Next.js App Router مع بنية Server Component صحيحة
كيف أُنشئ Client Component في Next.js App Router لإدارة الحالة
ما الفرق بين Link و useRouter للتنقل في Next.js
اعرض أفضل الممارسات لجلب البيانات في Server Components مقابل Client Components
最佳實務
- اجعل Server Components هي الافتراضية لتحسين الأداء والأمان
- استخدم Link من next/link لجميع روابط التنقل الداخلية
- افصل منطق جهة العميل في مكوّنات مستقلة مع توجيه use client
- عرّف metadata على مستوى الصفحة أو layout لتحسين SEO
避免
- تجنّب استخدام useRouter عندما يكون Link كافيًا
- لا تجعل جميع المكوّنات Client Components دون حاجة
- تجنّب جلب البيانات في Client Components عندما يمكن لـ Server Components التعامل معها