nextjs-app-router-patterns

Resumen

¿Qué es nextjs-app-router-patterns?

nextjs-app-router-patterns es una habilidad práctica para desarrolladores frontend que trabajan con Next.js 14 en adelante. Se centra en dominar la arquitectura App Router, incluyendo Server Components, streaming, rutas paralelas e interceptadas, y estrategias avanzadas de obtención de datos. Esta habilidad es ideal para equipos que construyen nuevas aplicaciones Next.js, migran desde Pages Router o buscan optimizar React Server Components para rendimiento y escalabilidad.

¿Quién debería usar esta habilidad?

• Desarrolladores frontend que construyen o migran al Next.js App Router
• Equipos que implementan renderizado del lado servidor (SSR), generación estática (SSG) o React Server Components
• Desarrolladores que optimizan la obtención de datos, caché y funcionalidades full-stack en aplicaciones React modernas

Problemas que resuelve

• Facilita la adopción de las mejores prácticas del Next.js App Router
• Aclara cuándo usar Server Components vs. Client Components
• Proporciona convenciones de archivos y patrones arquitectónicos para proyectos Next.js escalables

Cómo usarlo

Pasos de instalación

1. Instala la habilidad usando Skills CLI:

   npx skills add https://github.com/wshobson/agents --skill nextjs-app-router-patterns
   

2. Comienza revisando el archivo SKILL.md para un resumen general y guía del flujo de trabajo.
3. Explora archivos relacionados como README.md, AGENTS.md y metadata.json para obtener contexto más profundo si están disponibles.
4. Examina cualquier directorio rules/, resources/, references/ o scripts/ para materiales de apoyo y ejemplos de implementación.

Adaptación a tu proyecto

• Usa los modos de renderizado descritos (Server, Client, Static, Dynamic, Streaming) para decidir cómo estructurar cada ruta o componente en tu app Next.js.
• Sigue las convenciones recomendadas para el directorio app/, incluyendo layout.tsx, page.tsx, loading.tsx, error.tsx y not-found.tsx.
• Integra rutas paralelas e interceptadas según sea necesario para patrones avanzados de navegación y experiencia de usuario.
• Aplica técnicas avanzadas de obtención de datos y caché para optimizar rendimiento y escalabilidad.

¿Cuándo es adecuado nextjs-app-router-patterns?

• Al iniciar un nuevo proyecto Next.js con App Router
• Al migrar desde Pages Router para aprovechar Server Components y streaming
• Cuando necesitas patrones claros y mantenibles para desarrollo React full-stack

Preguntas frecuentes

¿Qué cubre nextjs-app-router-patterns?

Cubre patrones completos para usar Next.js 14+ App Router, incluyendo Server Components, streaming, rutas paralelas e interceptadas, y técnicas avanzadas de obtención de datos.

¿Por dónde empiezo después de instalar?

Comienza con el archivo SKILL.md para una visión general, luego explora otros archivos y carpetas de soporte según necesites.

¿Puedo usar esta habilidad con versiones anteriores de Next.js?

Esta habilidad está diseñada para Next.js 14 en adelante, específicamente para proyectos que usan App Router. No se recomienda para versiones anteriores ni para el Pages Router legado.

¿Cómo puedo previsualizar todos los archivos disponibles?

Usa la pestaña Files en el directorio de habilidades de tu agente para explorar el árbol completo de archivos, incluyendo referencias anidadas y scripts auxiliares.