المهارات nextjs-app-router-patterns
⚡

nextjs-app-router-patterns

آمن 🌐 الوصول إلى الشبكة⚙️ الأوامر الخارجية🔑 متغيرات البيئة

تطبيق أنماط Next.js App Router

يمكن أن تكون ميزات App Router صعبة في هيكلتها واختيارها. توفر هذه المهارة أنماطاً وأمثلة واضحة لتوجيه Next.js 14+ وجلب البيانات ومكونات الخادم.

يدعم: Claude Codex Code(CC)
⚠️ 68 ضعيف
1

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "nextjs-app-router-patterns". Show a simple plan for a product page with streaming and caching.

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

  • Use a server component for the product header so it renders first
  • Wrap reviews and recommendations in Suspense with loading UI
  • Apply tag based revalidation on product fetches for controlled cache refresh

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

آمن
v4 • 1/17/2026

Pure documentation skill containing only markdown explanations and TypeScript code examples. No executable scripts, network calls, filesystem access, or external commands are implemented. All code is illustrative documentation for Next.js App Router patterns.

2
الملفات التي تم فحصها
721
الأسطر التي تم تحليلها
3
النتائج
4
إجمالي عمليات التدقيق

عوامل الخطر

🌐 الوصول إلى الشبكة (11)
skill-report.json:6 SKILL.md:76 SKILL.md:136 SKILL.md:502 SKILL.md:505 SKILL.md:508 SKILL.md:511 SKILL.md:76 SKILL.md:542 SKILL.md:543 SKILL.md:544
⚙️ الأوامر الخارجية (23)
SKILL.md:33-44 SKILL.md:44-48 SKILL.md:48-92 SKILL.md:92-98 SKILL.md:98-137 SKILL.md:137-158 SKILL.md:158-162 SKILL.md:162-196 SKILL.md:196-200 SKILL.md:200-243 SKILL.md:243-245 SKILL.md:245-249 SKILL.md:249-285 SKILL.md:285-289 SKILL.md:289-352 SKILL.md:352-356 SKILL.md:356-398 SKILL.md:398-402 SKILL.md:402-445 SKILL.md:445-449 SKILL.md:449-494 SKILL.md:494-500 SKILL.md:500-522
🔑 متغيرات البيئة (2)
SKILL.md:137 SKILL.md:137
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

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

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

بدء بناء App Router

احصل على هيكل واضح للتخطيطات وحالات التحميل وجلب البيانات في تطبيق Next.js 14+ جديد.

تخطيط بنية المسارات

صمم مسارات متوازية ومتقاطعة للوحات التحكم والتدفقات المعقدة مع واجهة تحميل متسقة.

تحسين جلب البيانات

اختر استراتيجيات التخزين المؤقت وإعادة التحقق لصفحات المنتجات وصفحات التفاصيل.

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

أساسيات App Router 
Explain the core App Router file conventions and when to use Server Components versus Client Components.
إضافة Server Actions 
Provide a Server Actions pattern for adding an item to a cart with revalidation and redirect.
خطة المسارات المتوازية 
Suggest a parallel routes structure with loading states for analytics and team panels.
التخزين المؤقت المتقدم 
Recommend caching and revalidation choices for product listings and detail pages with tag invalidation.

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

  • ابدأ بمكونات الخادم وأضف العميل فقط عند الحاجة
  • ضع جلب البيانات مع المكون الذي يستخدمها
  • استخدم حدود Suspense لتمكين البث وحالات التحميل الواضحة

تجنب

  • جلب البيانات الحرجة في مكونات العميل بدون بديل من الخادم
  • الإفراط في تداخل التخطيطات التي تضخم أشجار العرض
  • تجاوز حالات التحامل لمصادر البيانات البطيئة

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

هل هذا متوافق مع Next.js 14 و 15
نعم. تستهدف أنماط App Router التي تظل متوافقة مع Next.js 14 و 15.
ما هي حدود هذه المهارة
توفر إرشادات وأمثلة، لكنها لا تقوم بتشغيل الكود أو بناء المشاريع.
هل يمكنني استخدام هذا مع تطبيق App Router موجود
نعم. يمكنك تطبيق الأنماط بشكل تدريجي على هيكلك الحالي.
هل يصل إلى بياناتي أو ملفاتي
لا. يوفر فقط إرشادات ولا يصل إلى البيانات المحلية.
ماذا لو تعارض نمط مع إعدادي
شارك قيودك واطلب تبايناً مصمماً للأنماط.
كيف يقارن بالوثائق الرسمية
يلخص وينظم الأنماط مع الأمثلة. تظل الوثائق الرسمية المرجع الأساسي.

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

المؤلف

wshobson

الترخيص

MIT

المستودع

https://github.com/wshobson/agents/tree/main/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns

مرجع

main

بنية الملفات

📄 SKILL.md