المهارات nextjs-architecture
🏗️

nextjs-architecture

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

Diseñar Arquitectura Next.js

متاح أيضًا من: Joseph OBrien

Construir aplicaciones Next.js requiere comprender App Router, Server Components y patrones de rendimiento. Esta habilidad proporciona orientación experta en arquitectura para diseñar, migrar y optimizar aplicaciones Next.js con patrones modernos.

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

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "nextjs-architecture". Diseña la arquitectura para un panel SaaS con autenticación y analíticas

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

  • Estructura de carpetas recomendada con grupos de rutas para autenticación y panel
  • Patrones de Server Component para obtención de datos en cada sección
  • Estrategia de composición de layout con layouts anidados
  • Organización de rutas API para endpoints backend
  • Recomendaciones de rendimiento para la página de analíticas

استخدام "nextjs-architecture". ¿Cómo migro de Pages Router a App Router?

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

  • Guía paso a paso de migración para conversión de layout
  • Patrones de transformación de archivos de página con ejemplos de código
  • Migración de obtención de datos de getServerSideProps a componentes async
  • Migración de getStaticPaths a generación de parámetros estáticos

استخدام "nextjs-architecture". ¿Cuáles son las estrategias de optimización de rendimiento para Next.js?

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

  • Recomendaciones de generación estática para páginas con mucho contenido
  • Configuración de ISR para contenido actualizado frecuentemente
  • Límites de Suspense para carga progresiva de datos
  • Estrategias de optimización de imágenes y división de código

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

آمن
v3 • 1/16/2026

Pure prompt-based skill containing only YAML frontmatter and markdown documentation. No executable code, file system access, network calls, or command execution capabilities. All 43 static findings are false positives triggered by documentation patterns: C2 keywords are common tech terms, cryptographic algorithm flags are TypeScript syntax, and shell backtick detections are markdown code fences.

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

عوامل الخطر

🌐 الوصول إلى الشبكة (1)
skill-report.json:6
⚙️ الأوامر الخارجية (13)
SKILL.md:40-42 SKILL.md:42-44 SKILL.md:44-46 SKILL.md:46-50 SKILL.md:50-52 SKILL.md:52-58 SKILL.md:58-70 SKILL.md:70-99 SKILL.md:99-105 SKILL.md:105-119 SKILL.md:119-123 SKILL.md:123-134 SKILL.md:134-136
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

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

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

Diseñar Estructura de Aplicación

Crear diseños de proyectos Next.js escalables con organización adecuada de rutas y layouts compartidos.

Migrar a App Router

Convertir aplicaciones Pages Router a App Router con patrones adecuados de Server Component.

Optimizar Rendimiento

Aplicar estrategias de renderizado como generación estática, ISR y streaming para producción.

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

Diseñar arquitectura 
Diseña la arquitectura para esta aplicación Next.js
Migrar a App Router 
Migra esta aplicación Pages Router a App Router
Implementar Server Components 
Implementa Server Components para esta funcionalidad
Optimizar rendimiento 
Optimiza esta página para rendimiento en producción

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

  • Usar Server Components como predeterminado y agregar use client solo cuando sea necesario
  • Aplicar generación estática para contenido que cambia con poca frecuencia
  • Usar límites de Suspense para transmitir datos lentos sin bloquear la página

تجنب

  • Convertir cada componente a Client Components innecesariamente
  • Obtener datos en Client Components cuando Server Components pueden manejarlo
  • Omitir límites de Suspense para consultas de base de datos lentas

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

¿Qué versiones de Next.js admiten App Router?
App Router requiere Next.js 13 o posterior. Se recomienda la versión 14+ para uso en producción.
¿Cuál es la diferencia entre Server y Client Components?
Server Components se renderizan en el servidor y reducen el tamaño del bundle. Client Components se ejecutan en el navegador.
¿Puedo usar esta habilidad con proyectos Next.js existentes?
Sí. La habilidad proporciona orientación tanto para proyectos nuevos como para migraciones desde Pages Router.
¿Esta habilidad modifica los archivos de mi proyecto?
No. Esta habilidad proporciona recomendaciones de arquitectura. Debes aplicar los cambios manualmente a tu código base.
¿Qué estrategias de renderizado cubre esta habilidad?
Generación estática, ISR, SSR y streaming con Suspense para carga progresiva.
¿Cómo se compara esto con la documentación estándar de Next.js?
Esta habilidad proporciona patrones arquitectónicos curados y orientación práctica de migración más allá de la documentación básica.

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

المؤلف

Joseph OBrien

الترخيص

MIT

المستودع

https://github.com/89jobrien/steve/tree/main/steve/skills/nextjs-architecture

مرجع

main

بنية الملفات

📄 SKILL.md