تجمع إضافة nextjs-expert خمس مهارات وثلاثة أوامر توجّه Claude Code ليكتب مشروع Next.js بقواعد App Router: أين يوضع كل ملف في مجلد app/، ومتى يعمل المكوّن على الخادم ومتى في المتصفح، وكيف تُبنى نقاط API والنماذج وتسجيل الدخول. أنماطها مكتوبة لـ Next.js 15 بلغة TypeScript.
ثلاثة أوامر تستدعيها بنفسك
/nextjs-expert:scaffold: يسألك ماذا تنشئ: صفحة أو layout أو مكوّن خادم أو عميل أو Route Handler أو Server Action أو حالتي التحميل والخطأ، ثم يقرأ مجلدي app/ وcomponents/ ليتبع أسلوب مشروعك./nextjs-expert:add-auth: يضيف Auth.js، الإصدار الخامس من NextAuth. يبحث عن مصادقة سابقة ومخطط Prisma، ويسألك عن مزوّدي الدخول ونوع الجلسة والمسارات المحمية والأدوار، ثم يثبّت next-auth@beta ويسرد 11 ملفًا لإنشائها، منها auth.ts وmiddleware.ts وصفحتا الدخول والتسجيل./nextjs-expert:optimize: للقراءة فقط، فلا يملك Write ولا Bash. يفحص حدود ‘use client’، والطلبات المتتابعة التي تصلح لـ Promise.all، ووسوم img بدل next/image، والتخزين المؤقت، وملفات loading.tsx الناقصة، ثم يسلّم تقريرًا بالأولويات والتعديل المقترح لكل ملف.
خمس مهارات يستدعيها Claude وحده
حين يطابق طلبك وصف مهارة يحمّلها، ويفتح من مراجعها وأمثلتها ما يلزم؛ وهي 17 ملفًا في المهارات الخمس.
- app-router: ملفات page وlayout وloading وerror وnot-found، والمسارات الديناميكية وcatch-all، والمسارات المتوازية والاعتراضية لفتح نافذة فوق الصفحة.
- server-components: دليل قرار بين مكوّن الخادم ومكوّن العميل، وتمرير children لتركيب الاثنين، وجلب البيانات بالتوازي والبث مع Suspense.
- route-handlers: دوال GET وPOST وPUT وPATCH وDELETE، والكوكيز وCORS، وبث رد نموذج لغوي، ومثال API كامل للمنشورات مع تحقق Zod.
- server-actions: توجيه ‘use server’، والنماذج مع Zod، وrevalidatePath وrevalidateTag، والتحديث المتفائل بـ useOptimistic، والتحقق من صاحب المنشور قبل حذفه.
- auth-patterns: إعداد NextAuth v5، وحماية المسارات من middleware، والجلسة بـ JWT أو قاعدة بيانات، وإضافة دور المستخدم إليها.
مثال: صفحة مقال بمسار ديناميكي
يقترح README الأصلي طلبًا مثل «Create a blog post page with dynamic routing»، ويذكر أن Claude يستعين فيه بمهارتي app-router وserver-components. وتصف ملفاتهما الناتج: app/blog/[slug]/page.tsx مكوّنَ خادم ينتظر params بـ await لأنها Promise، مع generateMetadata لعنوان الصفحة، وملفي loading.tsx وerror.tsx.
التثبيت
- فك ضغط الملف في مجلد ثابت.
- للتجربة في جلسة واحدة شغّل
claude --plugin-dir "PATH/TO/EXTRACTED/plugin"بمسار فك الضغط الفعلي. - للاستخدام الدائم في مشروع انسخ مجلدات plugin/skills إلى .claude/skills داخله، وملفات plugin/commands إلى .claude/commands، فتصير الأوامر /scaffold و/add-auth و/optimize.
أرفقتُ دليلًا عربيًا لطريقة الجلسة الواحدة، وفهرسًا بمسار كل مكوّن. ويحتاج add-auth إلى npm وإذنك بتشغيل أوامر الطرفية.
حدود قبل أن تعتمد عليها
- ملفات server-actions تستخدم useFormState من react-dom، وبديله في React 19 هو useActionState من react. ومع إصدار أحدث من Next.js 15 طابِق الأسماء، ومنها middleware.ts، مع توثيق إصدارك.
- ملف SKILL.md في مهارة auth-patterns يقرأ GITHUB_ID وGITHUB_SECRET، بينما يكتب مثالها والأمر add-auth GITHUB_CLIENT_ID وGITHUB_CLIENT_SECRET؛ فوحّد الاسمين بين auth.ts و.env.local.
- بند Metrics في تقرير optimize تقدير من النموذج لا قياس، فقِس الأداء قبل التعديل وبعده.
- الأوامر خاصة بـ Claude Code، وأوصاف المهارات تتجاوز حد 200 حرف في رافع المهارات في claude.ai، ولم أجهّز نسخة لـ Codex.
- الملفات بالإنجليزية كما كتبها أصحابها. ابدأ بها على فرع git منفصل.
الترخيص
كتب مجتمع BuildWithClaude إضافة nextjs-expert في مستودع buildwithclaude لـ davepoon، بترخيص MIT المرفق نصه في الحزمة.
