Desarrollo Web Full Stack con Next.js

Este curso se organiza alrededor de una tienda ficticia de material de dibujo que debe mostrar un catálogo, permitir consultar cada producto, conservar un carrito y registrar cambios de forma controlada. El objetivo no es acumular recetas aisladas, sino aprender a decidir qué ocurre en el servidor, qué necesita el navegador y cómo comprobar cada frontera antes de publicar.

En el primer módulo construirás el mapa mental de Next.js. Compararás React con un framework que añade convenciones de rutas y ejecución, y decidirás cuándo una página puede generarse en el servidor. Después contrastarás App Router y Pages Router usando un proyecto existente que debe migrarse sin romper URLs. La distinción entre Server Components y Client Components será práctica: una ficha de producto podrá renderizar datos en el servidor, mientras un selector de cantidad quedará en una frontera de cliente pequeña. La evaluación de este módulo comprobará que puedas justificar esas decisiones, no solo repetir definiciones.

El segundo módulo convierte la arquitectura en navegación verificable. Crearás un layout compartido para un panel de inventario, separarás grupos de rutas que no deben aparecer en la URL y resolverás una ruta dinámica para consultar un producto por identificador. Luego aplicarás una Server Action a una mutación de nombre de producto. La validación y la autorización ficticia ocurrirán en el servidor, incluso si la interfaz oculta temporalmente el control. La evaluación reunirá listado, detalle, estado de no encontrado y cambio validado en un recorrido pequeño pero completo.

El tercer módulo se concentra en la interfaz. Configurarás Tailwind siguiendo una sola receta coherente con la configuración presente en el proyecto, y comprobarás foco visible, lectura móvil y contraste mediante una tarjeta concreta. Extraerás componentes reutilizables con props explícitas, evitando que un componente genérico esconda reglas de negocio. Después centralizarás un estado de carrito sencillo con un hook y un contexto de cliente. La evaluación pedirá calcular subtotales como datos derivados, asociar etiquetas con controles y revisar la navegación mediante teclado.

El último módulo transforma esas piezas en un plan de e-commerce local y ficticio. Primero definirás entidades, relaciones, permisos y estados antes de programar. Luego implementarás productos, categorías y catálogo con datos completos que permitan comprobar filtros y detalles. Añadirás autenticación simulada para el aula, carrito y acciones de servidor con validación, sin usar pagos ni credenciales reales. Finalmente describirás un despliegue controlado, variables separadas por entorno, una comprobación de compilación y medidas básicas de rendimiento. Las interfaces y configuraciones pueden cambiar, por lo que documentarás decisiones y revisarás la documentación oficial entregada por el curso en lugar de copiar comandos sin contexto.

El trabajo final será una tienda de láminas y pinceles con seis productos ficticios. Deberá incluir una portada, catálogo filtrable, detalle dinámico, carrito y una acción protegida para renombrar un producto. Se comprobará con datos de entrada definidos, rutas directas, errores deliberados y una lista de criterios reproducibles. La evidencia será el árbol de rutas, fragmentos relevantes, capturas o registros de pruebas locales y una breve justificación de cada frontera servidor-cliente. Completar el proyecto demuestra que puedes aplicar los conceptos del curso en un entorno de práctica; no implica que el sistema esté listo para procesar pedidos reales.