技能 react-nextjs-development
📦

react-nextjs-development

安全

بناء تطبيقات React و Next.js

توفر هذه المهامة سير عمل منظم لتطوير تطبيقات React و Next.js الحديثة مع App Router و Server Components و TypeScript. ترشدك خلال إعداد المشروع، وهيكلة المكونات، والتنسيق، وجلب البيانات، والتوجيه، والنماذج، والاختبار، والنشر.

支持: Claude Codex Code(CC)
📊 70 充足
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“react-nextjs-development”。 إنشاء مشروع Next.js 14 مع App Router و TypeScript

预期结果:

  • تم إنشاء هيكل المشروع مع مجلد app/ لـ App Router
  • تم تكوين TypeScript مع الوضع الصارم ومسارات tsconfig المناسبة
  • تم تثبيت Tailwind CSS v4 مع التكوين الأساسي
  • تم إعداد ESLint و Prettier مع قواعد خاصة بـ React
  • تم إنشاء قوالب التخطيط والصفحات الأساسية

正在使用“react-nextjs-development”。 بناء مكون ملف مستخدم مع وظيفة التحرير

预期结果:

  • Server Component لجلب بيانات المستخدم من API
  • Client Component لتفاعل النموذج وإدارة الحالة
  • مخطط Zod للتحقق من صحة الملف الشخصي مع رسائل أخطاء مخصصة
  • تكامل React Hook Form مع استدلال النوع المناسب
  • بطاقة ملف شخصي متجاوبة منسقة بـ Tailwind مع نافذة تحرير منبثقة

安全审计

安全
v1 • 2/24/2026

This skill is a documentation and workflow bundle containing only markdown content with usage prompts. Static analysis flagged 55 external_commands patterns and 11 cryptographic patterns, but all are FALSE POSITIVES - the backticks are markdown code formatting, not shell execution, and no cryptographic code exists. No security risks identified. Safe for publication.

1
已扫描文件
230
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
32
社区
100
安全
83
规范符合性

你能构建什么

مطور واجهات أمامية يبني لوحة تحكم

إنشاء لوحة تحكم إدارية حديثة مع Next.js App Router و Server Components لجلب البيانات و Tailwind CSS للتصميم المتجاوب مع هيكلة مكونات مناسبة.

مطور Full-Stack يبدأ مشروع SaaS

إنشاء تطبيق SaaS جديد بسرعة مع TypeScript، وتنفيذ تدفقات المصادقة، وإعداد التحقق من صحة النماذج مع Zod، والنشر إلى Vercel مع بيئات المعاينة.

قائد فريق يضع معايير التطوير

تحديد أنماط React المتسقة، وإرشادات هيكلة المكونات، واستراتيجيات الاختبار، وبوابات جودة الكود لفريق تطوير يعتمد Next.js 14+.

试试这些提示

مبتدئ: إنشاء مشروع Next.js جديد 
ساعدني في إنشاء مشروع Next.js 14 جديد مع App Router و TypeScript و Tailwind CSS. قم بإعداد هيكل المجلد الأساسي مع الاتفاقيات المناسبة للمكونات و lib ومجلدات app.
متوسط: بناء مكون جلب بيانات 
أنشئ Server Component يجلب البيانات من نقطة نهاية API ويعرضها في قائمة. يتضمن معالجة أخطاء مناسبة، وحالات التحميل، وأنواع TypeScript لهيكل البيانات.
متقدم: إعداد نموذج مع التحقق من الصحة 
ابنِ نموذجًا متعدد الخطوات باستخدام React Hook Form مع التحقق من مخطط Zod. يتضمن رسائل أخطاء على مستوى الحقل، واستمرارية حالة النموذج، وتكامل TypeScript المناسب لبيانات النموذج الآمنة نوعيًا.
خبير: تنفيذ Parallel Routes و Intercepting Routes 
قم بإعداد Parallel Routes في Next.js App Router لتخطيط لوحة التحكم مع Intercepting Routes لنوافذ الحوار المنبثقة. يتضمن تكوينات الفتحات المناسبة والتقديم المشروط بناءً على سياق التنقل.

最佳实践

  • استخدم Server Components بشكل افتراضي وانتقل إلى Client Components فقط عند الحاجة إلى التفاعلية
  • نفذ أنواع TypeScript المناسبة لجميع المكونات والخصائص واستجابات API للكشف عن الأخطاء في وقت التجميع
  • اتبع مبدأ التموضع المشترك من خلال إبقاء المكونات والأنماط والاختبارات معًا في أدلة قائمة على الميزات

避免

  • تجنب استخدام useEffect لجلب البيانات عندما يمكن لـ Server Components معالجته بكفاءة أكبر
  • لا تمرر كائنات JSON كبيرة كخصائص مكون عميل - اجلب البيانات مباشرة في المكون
  • لا تتخطى حدود الخطأ أبدًا - نفّذ دائمًا معالجة أخطاء مناسبة للعمليات غير المتزامنة

常见问题

ما الفرق بين App Router و Pages Router في Next.js؟
App Router (مُقدم في Next.js 13) يستخدم مجلد app/ مع Server Components بشكل افتراضي، ويدعم التخطيطات المتداخلة، ويوفر أداءً أفضل. Pages Router يستخدم مجلد pages/ وهو نظام التوجيه الأقدم. تركز هذه المهارة على App Router لتطوير Next.js الحديث.
متى يجب استخدام Server Components مقابل Client Components؟
استخدم Server Components بشكل افتراضي للمحتوى الثابت وجلب البيانات والحفاظ على حجم الحزمة صغيرًا. استخدم Client Components فقط عند الحاجة إلى التفاعلية مثل معالجات onClick أو useState أو useEffect أو واجهات برمجة التطبيقات الخاصة بالمتصفح. علّم Client Components بتوجيه 'use client'.
هل Tailwind CSS v4 متوافق مع Next.js App Router؟
نعم، Tailwind CSS v4 متوافق تمامًا مع Next.js App Router. يوفر إصدار v4 أداءً محسنًا مع محرك جديد وتكوين مبسط. تتضمن هذه المهارة تعليمات الإعداد لـ Tailwind v4 مع مشاريع App Router.
كيف أتعامل مع المصادقة مع Server Components؟
تعمل المصادقة بسلاسة مع Server Components. يمكنك قراءة ملفات تعريف ارتباط الجلسة على الخادم، وحماية المسارات باستخدام middleware، وتمرير بيانات المستخدم إلى المكونات. لفحوصات المصادقة من جانب العميل، استخدم Client Components مع الخطافات من مزود المصادقة الخاص بك.
هل يمكنني استخدام هذه المهارة مع مشروع Next.js 13 موجود؟
نعم، ولكن قد تختلف بعض الأنماط. يدعم Next.js 13.4+ App Router، لذا تنطبق معظم المفاهيم. إذا كنت تستخدم إصدارًا أقدم يحتوي فقط على Pages Router، ففكر في الترحيل إلى App Router للاستفادة الكاملة من سير عمل هذه المهارة.
ما أطر الاختبار التي توصي بها هذه المهارة؟
توصي هذه المهارة بـ Vitest لاختبار الوحدات والمكونات بسبب سرعته وتوافقه مع Vite. بالنسبة لاختبار النهاية إلى النهاية، يُوصى بـ Playwright لموثوقيته ودعمه عبر المتصفحات. كلاهما يتكامل بشكل جيد مع مشاريع Next.js.

开发者详情

作者

sickn33

许可证

MIT

仓库

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-nextjs-development

引用

main

文件结构

📄 SKILL.md