Lección 8 de 16 · Lectura y práctica
Evaluación: Routing y gestión de datos
Comprueba rutas, layouts y cambios de datos con un catálogo ficticio. Separa lo que muestra la interfaz de lo que valida el servidor.
Del concepto a la práctica
Taller de esta lección
La práctica reúne una lectura, una ruta dinámica y una mutación. El criterio importante es que la URL determina qué se lee, mientras la acción decide qué cambio se permite. Usa datos ficticios para que cada resultado pueda repetirse sin afectar a terceros.
Ejemplo resuelto
Registros: p1, Papel, 4 y p2, Tinta, 7. /productos/p2 muestra Tinta. Una acción recibe p2 y Tinta negra; acepta solo si el id existe y la sesión ficticia está autorizada.
El resultado de renombrar de la lección anterior es una validación sin escritura. Para esta evaluación, añade un repositorio de práctica y una operación por ID; comprueba que devuelve el registro modificado y refresca la vista según la caché que utilices. Un Map en memoria solo sirve para esta prueba local, pierde sus cambios al reiniciar y no representa almacenamiento fiable entre instancias.
Pruébalo
Implementa listado y detalle con esos dos registros.
Prueba
/productos/p3como identificador inexistente.Envía un nombre vacío y luego uno válido.
Anota respuesta y datos antes y después.
Comprueba tu resultado
Error frecuente: ocultar el botón y considerar eso autorización. Corrección: verifica la sesión dentro de la acción.
Ejercicio: con p1 y p2, el detalle de p3 debe ser no encontrado; Papel nuevo para p1 con autorización verdadera debe cambiar solo ese registro, y una sesión falsa debe devolver rechazo sin modificarlo.
Mapa de prácticaEl servidor puede obtener datos y producir el HTML inicial. El navegador muestra el resultado y ejecuta las interacciones que necesitan estado local. Mantén las claves sensibles en el servidor y define qué parte se ejecuta en cada entorno.
Ver la infografía en tamaño completo ↗Fuentes para profundizar
Evaluación y práctica: Comprueba rutas, layouts y cambios de datos con un catálogo ficticio. Separa lo que muestra la interfaz de lo que valida el servidor.
Tarea práctica: catálogo y actualización segura
En un proyecto con App Router, crea un listado /productos y un detalle /productos/[id] con dos productos ficticios. Un grupo de rutas puede organizar carpetas sin añadir su nombre a la URL. Usa un layout para la navegación compartida; verifica el enlace desde el listado y una URL escrita directamente.
- Haz que un identificador inexistente muestre el estado de recurso no encontrado.
- Crea una acción de servidor que reciba un nombre, valide su contenido y compruebe la autorización en el servidor. En esta práctica, usa una sesión ficticia documentada; no simules seguridad sólo ocultando el botón.
- Muestra el error de validación sin perder el valor escrito. Tras una modificación válida, aplica la estrategia de actualización o revalidación que corresponde a tu fuente de datos.
- Anota la URL probada, la entrada enviada y el resultado observado. Una etiqueta de carpeta no añade seguridad ni convierte una mutación en una lectura.
Criterios para revisar tu proyecto
- El listado y el detalle utilizan las rutas esperadas, con navegación y acceso directo.
- El layout contiene los elementos compartidos; la página contiene el recurso concreto.
- Una entrada inválida no modifica datos y muestra un error útil.
- Una persona sin autorización no puede modificar datos llamando directamente a la acción.
- La vista muestra el resultado actualizado, sin afirmar que una caché se invalidó si no comprobaste esa ruta.
Respuesta de referencia y feedback
Comparar tu solución
Una solución válida usa app/productos/page.tsx y app/productos/[id]/page.tsx. Un segmento entre paréntesis organiza rutas sin aparecer en la URL. La autorización y la validación pertenecen al servidor, también en una Server Action. Si la vista sigue mostrando el valor anterior, revisa la lectura de datos y su estrategia de caché; no añadas una actualización visual que oculte el fallo de persistencia.
Si una entrada inválida cambia el producto, vuelve a la validación antes de añadir estilos. Si el identificador faltante parece una ficha vacía, revisa el estado de recurso no encontrado. Conserva la evidencia de cada intento.
Documentación para la revisión
Consulta las referencias oficiales de Route Groups y seguridad de datos. Guía de práctica consultada el 2 de octubre de 2026.
Repaso antes de enviar
Resultado y finalización
En tu aula, el cuestionario tiene cinco preguntas y se aprueba con cuatro respuestas correctas (80%). Después de enviar, recibes el resultado y una explicación por pregunta, incluso si no apruebas. Dispones de cinco intentos, sin límite de tiempo. La evaluación guarda cada intento y el estado de aprobación en tu cuenta; no bloquea las lecciones siguientes ni modifica tu progreso anterior.
La tarea práctica usa una lista de revisión propia y no recibe una calificación automática. Comprueba sus criterios antes de marcar la lección como completada con el control del aula. Aprobar el cuestionario no certifica que tu proyecto esté preparado para producción ni equivale a completar todo el curso.
Trabaja con datos ficticios en un proyecto de práctica, sin pagos, correos a clientes ni credenciales reales.
Sigue con Desarrollo Web Full Stack con Next.js
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.