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

nextjs-best-practices

آمن

تطبيق أفضل ممارسات Next.js مع Claude

يكافح المطورون لمواكبة أنماط Next.js App Router وغالباً ما يستخدمون أساليب قديمة. توفر هذه المهارة أفضل الممارسات الشاملة لمكونات الخادم وجلب البيانات والتوجيه وتحسين الأداء.

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "nextjs-best-practices". هل يجب أن أجعل هذا المكون Server أو Client Component؟ يعرض بيانات ملف المستخدم وله زر لتبديل السمة.

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

قسم المكون: أنشئ Server Component لجلب وعرض بيانات ملف المستخدم، ثم مرر تلك البيانات إلى Client Component لزر تبديل السمة التفاعلي. هذا يبقي جلب البيانات على الخادم (فعال) بينما يبقى التفاعل على العميل.

استخدام "nextjs-best-practices". كيف يجب أن أقوم بتخزين مؤقت لواجهات برمجة التطبيقات التي تتغير كل ساعة؟

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

استخدم ISR (إعادة التوليد الثابت التدريجي) مع revalidate: 3600 (ثواني). هذا يخزن الاستجابة لمدة ساعة واحدة، ثم يعيد التوليد في الطلب التالي بعد انتهاء الصلاحية. للتحديثات عند الطلب، استخدم revalidatePath أو revalidateTag عندما يتم تحديث مصدر البيانات الخاص بك.

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

آمن
v1 • 2/16/2026

Security evaluation complete. All static findings are false positives. The skill contains only markdown documentation about Next.js best practices. Code examples (e.g., page.tsx, revalidate: 60) are displayed in markdown code fences, not executed as shell commands. No cryptographic algorithms, network calls, or file operations are present. This is a safe reference guide for Next.js development.

1
الملفات التي تم فحصها
204
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية

الأنماط المكتشفة

False Positive: Markdown Code ExamplesFalse Positive: Weak Cryptographic Algorithm
تم تدقيقه بواسطة: claude

درجة الجودة

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

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

إعداد مشروع Next.js جديد

مطور يبدأ مشروع Next.js جديد ويريد اتباع أفضل الممارسات من البداية. يستخدم المهارة لفهم正确的 بنية المكونات.

إعادة هيكلة الكود القديم

فريق يهاجر من Pages Router إلى App Router يحتاج إلى إرشادات حول تحويل الجلب من جانب العميل إلى مكونات الخادم.

مراجعة الأداء

مطور يقوم بتدقيق تطبيق Next.js موجود يستخدم المهارة لتحديد الأنماط المضادة وفرص التحسين.

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

دليل قرار المكونات 
هل يجب أن أستخدم Server Component أو Client Component لـ [component description] الذي [describe functionality]؟ اشرح المفاضلات.
نمط جلب البيانات 
ما أفضل طريقة لجلب [data type] من [data source] في Next.js؟ أحتاج [describe freshness requirements].
هيكل المسارات 
كيف يجب أن أنظم المسارات لـ [describe application sections]؟ هل يجب استخدام مجموعات المسارات؟ اعرض هيكل الملفات.
تحسين الأداء 
صفحتي في Next.js مع [describe content] بطيئة في التحميل. ما تقنيات التحسين من أفضل الممارسات التي يجب أن أطبقها؟

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

  • ابدأ بمكونات الخادم افتراضياً - أضف 'use client' فقط عندما تحتاج إلى التفاعلية مثل useState أو useEffect أو معالجات الأحداث
  • جلب البيانات في مكونات الخادم للاستفادة من التخزين المؤقت من جانب الخادم وتقليل حجم حزمة العميل
  • استخدم ملفات loading.tsx و error.tsx لتوفير تجربة مستخدم جيدة أثناء تحميل البيانات ومعالجة الأخطاء بشكل سلس

تجنب

  • إضافة 'use client' لكل مكون - هذا defeats فوائد أداء مكونات الخادم ويزيد حجم الحزمة
  • جلب البيانات في مكونات العميل مع useEffect - هذا creates طلبات غير ضرورية من جانب العميل وحالات تحميل
  • تخطي loading.tsx و error.tsx - يرى المستخدمون شاشات فارغة أو رسائل خطأ خام بدلاً من تجربة مستخدم مناسبة

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

ما هو نوع المكون الافتراضي في Next.js App Router؟
مكونات الخادم هي الافتراضية. لا تحتاج إلى أي توجيه - المكونات هي من جانب الخادم افتراضياً. أضف 'use client' فقط عندما تحتاج إلى ميزات من جانب العميل.
متى يجب استخدام مكونات العميل؟
استخدم مكونات العميل عندما تحتاج إلى React hooks (useState، useEffect)، معالجات الأحداث (onClick، onChange)، واجهات برمجة تطبيقات المتصفح، أو مكتبات طرف ثالث تعتمد على العرض من جانب العميل.
كيف يعمل التخزين المؤقت للبيانات في Next.js؟
طلبات fetch مخزنة مؤقتاً افتراضياً. استخدم 'no-store' للبيانات الديناميكية التي تتغير في كل طلب. استخدم 'revalidate' لـ ISR المستند إلى الوقت. استخدم revalidatePath أو revalidateTag لإلغاء التخزين المؤقت عند الطلب.
ما هي مجموعات المسارات في Next.js؟
تستخدم مجموعات المسارات صيغة (folderName) لتنظيم المسارات دون التأثير على URL. تتيح لك تطبيق تخطيطات مختلفة على أقسام المسار مع الحفاظ على بنية URL نظيفة.
كيف أتعامل مع الأخطاء في Next.js App Router؟
أنشئ error.tsx (error.ts في مسارات API) لالتقاط الأخطاء وعرض واجهة استعادة. استخدم not-found.tsx لصفحات 404. يتم لف كلاهما تلقائياً بواسطة حدود الأخطاء.
هل يمكنني استخدام Server Actions مع مكونات العميل؟
نعم. حدد Server Actions في ملف مع 'use server'، ثم استورد واستدعها من مكونات العميل. يعمل الإجراء على الخادم بينما يبقى المكون تفاعلياً.

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

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md