next-best-practices

Resumen

¿Qué es next-best-practices?

next-best-practices es una habilidad integral para desarrolladores frontend que trabajan con Next.js. Proporciona prácticas recomendadas y patrones prácticos para construir aplicaciones Next.js escalables y mantenibles. Cubre desde convenciones de archivos y límites de React Server Component (RSC) hasta patrones de datos asíncronos, manejo de errores y optimización, ayudándote a evitar errores comunes y adoptar flujos de trabajo modernos de Next.js.

¿Quién debería usar esta habilidad?

• Desarrolladores frontend que usan Next.js y React
• Equipos que migran al App Router de Next.js
• Cualquier persona que quiera aprender o aplicar las convenciones actualizadas de Next.js

¿Qué problemas resuelve?

• Aclara la estructura de archivos y carpetas en proyectos grandes de Next.js
• Guía el uso correcto de Componentes de Servidor y Cliente
• Explica patrones de datos asíncronos y migración para Next.js 15+
• Ayuda a prevenir errores comunes en empaquetado y tiempo de ejecución
• Proporciona estrategias robustas para manejo de errores y depuración

¿Cuándo es adecuado usar next-best-practices?

• Al iniciar un nuevo proyecto Next.js o refactorizar uno existente
• Al incorporar nuevos miembros al equipo con las convenciones de Next.js
• Al resolver problemas con obtención de datos, enrutamiento o empaquetado

Cómo Usar

Pasos de Instalación

1. Añade la habilidad a tu proyecto usando:

   npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices
   

2. Abre el archivo SKILL.md para un resumen general y enlaces a guías detalladas.
3. Revisa los archivos de soporte para temas específicos:
   • file-conventions.md: Aprende sobre estructura del proyecto, segmentos de rutas y archivos especiales.
   • rsc-boundaries.md: Entiende patrones válidos e inválidos de React Server Component.
   • async-patterns.md: Migra a las nuevas APIs asíncronas para params, cookies y headers.
   • data-patterns.md: Elige las estrategias adecuadas para obtención y mutación de datos.
   • error-handling.md: Implementa límites de error y maneja excepciones de navegación.
   • bundling.md: Soluciona problemas de empaquetado con paquetes de terceros.
   • directives.md: Usa directivas de React y Next.js como 'use client', 'use server' y 'use cache'.
   • debug-tricks.md: Acelera la depuración con herramientas de desarrollo y endpoints de Next.js.

Adaptación a tu Proyecto

• Usa los patrones proporcionados como referencia y adáptalos a tu repositorio, herramientas y entorno de despliegue.
• No copies código literalmente; revisa cada patrón para asegurar compatibilidad con tu stack y versión de Next.js.

Temas Clave Cubiertos

• Convenciones de archivos y estructura del proyecto
• Límites de RSC y patrones de componentes
• Obtención de datos asíncrona y migración
• Manejadores de rutas y selección en tiempo de ejecución
• Límites de error y manejo global de errores
• Optimización de imágenes y fuentes
• Empaquetado y externalización de dependencias
• Depuración y herramientas de desarrollo

Preguntas Frecuentes

¿Cómo puedo previsualizar el contenido de next-best-practices?

Después de la instalación, abre la pestaña Archivos para explorar todas las guías incluidas, como SKILL.md, async-patterns.md, bundling.md y más. Cada archivo se enfoca en una práctica recomendada específica de Next.js.

¿next-best-practices es específico para alguna versión de Next.js?

La habilidad está actualizada para Next.js 15+ y cubre pasos de migración para las nuevas APIs asíncronas y convenciones. Algunos patrones pueden no aplicar en versiones anteriores.

¿Puedo usar next-best-practices con configuraciones personalizadas?

Sí, pero revisa cada patrón para asegurar compatibilidad con tus configuraciones personalizadas, especialmente en enrutamiento, runtimes de servidor y empaquetado.

¿Qué hago si necesito más detalles sobre un tema específico?

Cada archivo temático contiene ejemplos prácticos y referencias a la documentación oficial de Next.js o React para profundizar en el aprendizaje.

¿Dónde puedo obtener ayuda si tengo problemas?

Consulta debug-tricks.md para consejos avanzados de depuración, o revisa la documentación oficial de Next.js enlazada dentro de los archivos de la habilidad.