Junior → Arquitecto → Más allá
Hoja de Ruta del Ingeniero Frontend
Un camino de aprendizaje graduado por nivel a través de todo en esta guía. Cada etapa lista lo que ya puedes hacer y qué aprender a continuación — y cada tarjeta está etiquetada con su nivel para que puedas practicar exactamente donde estás.
- 1
Junior
Publica páginas y componentes con guía.
Entregas páginas y componentes con guía. El objetivo es fluidez en los fundamentos del App Router — enrutamiento por sistema de archivos, la división Server/Client Component, y obtención básica de datos — para que puedas construir una página funcional de punta a punta.
Ya puedes
- ✓Crear rutas con la convención de sistema de archivos: page.tsx, layout.tsx, loading.tsx, not-found.tsx.
- ✓Explicar, a nivel superficial, que los componentes son Server Components por defecto y "use client" opta por el cliente.
- ✓Obtener datos en un Server Component con async/await y renderizarlos directamente.
- ✓Usar next/image y next/font para que las imágenes y tipografía no arruinen Lighthouse por defecto.
- ✓Leer parámetros de ruta y searchParams en un componente de página.
Mejora con
- →Profundidad en enrutamiento dinámico: segmentos catch-all, grupos de rutas, y generateStaticParams.
- →El modelo de caché — qué se cachea por defecto y por qué una página de repente se vuelve obsoleta o estática.
- →Mutando datos con Server Actions en lugar de rutas API creadas manualmente.
- →Escribir tus primeras pruebas de componentes y rutas con Jest/RTL.
- 2
Mid
Domina una ruta de principio a fin: datos, layout, tests.
Dueño una ruta de punta a punta — datos, layout, pruebas — con poca supervisión. El objetivo es profundidad en el kit de herramientas cotidiano del App Router: enrutamiento en capas, el modelo de caché anterior, y Server Actions para formularios reales.
Ya puedes
- ✓Recurrir a grupos de rutas, rutas paralelas, y rutas interceptadas cuando la estructura de URL los requiera.
- ✓Ajustar el caché de fetch con { cache, next: { revalidate, tags } } e invalidarlo con revalidatePath/revalidateTag.
- ✓Construir un formulario con Server Action con estados pendiente/error, no un fetch del lado del cliente a una ruta API creada manualmente.
- ✓Proteger una ruta con auth con una verificación en un layout o middleware y redirigir apropiadamente.
- ✓Escribir pruebas unitarias para componentes y rutas con Jest y React Testing Library.
Mejora con
- →Profundidad en Cache Components: "use cache", cacheLife, cacheTag, y cómo reemplazan el viejo modelo mental de fetch-cache.
- →Perfilado de rendimiento: leyendo el payload RSC, reduciendo bundles del cliente, persiguiendo Core Web Vitals con herramientas reales.
- →Endurecimiento de seguridad: la capa de acceso a datos, evitando filtración de secretos a bundles del cliente, CSRF en Server Actions.
- →Pensamiento de diseño de sistemas frontend: dónde viven realmente las decisiones de estrategia de renderizado y caché.
- 3
Senior
Profundidad en renderizado y caché, rendimiento y seguridad.
Traes profundidad en renderizado, caché, y rendimiento, y elevas el estándar del equipo en velocidad y seguridad. El objetivo ser la persona que perfila en lugar de adivinar y puede defender una decisión de caché bajo interrogación.
Ya puedes
- ✓Explicar Cache Components ("use cache", cacheLife, cacheTag) y el payload RSC de memoria, incluyendo lo que realmente cruza la red.
- ✓Diseñar auth para que no pueda ser evadida: verificaciones en proxy.ts para enrutamiento más verificaciones reales dentro de cada Server Action y llamada de acceso a datos.
- ✓Perfilar Core Web Vitals con Lighthouse, Chrome DevTools, y Vercel Analytics, luego arreglar el cuello de botella real.
- ✓Endurecer una aplicación contra XSS, CSRF, y filtración accidental de secretos del servidor a bundles del cliente.
- ✓Decidir, con razones, cuándo una ruta debería ser estática, dinámica, o transmitida — y defender el compromiso.
Mejora con
- →Diseño de sistemas a escala: estrategia de renderizado/caché para un producto completo, no una ruta.
- →Decisiones de monorepo y biblioteca de componentes compartida que otros equipos construyen encima.
- →Entrega en edge: qué pertenece al edge, qué no, y por qué.
- →Impulsar una migración segura y escalonada (por ejemplo, adoptando Cache Components) a través de una base de código grande.
- 4
Arquitecto
Diseño de sistemas, decisiones de plataforma, convenciones para toda la organización.
Diseñas la estrategia de renderizado y caché para un producto completo y tomas las decisiones de plataforma que mueven a un equipo entero. El objetivo es la toma de decisiones antes del código — para la red más lenta, el bundle más grande, y la migración más riesgosa.
Ya puedes
- ✓Diseñar una estrategia de renderizado/caché para un producto completo y justificarla ruta por ruta.
- ✓Dueño de estructura de monorepo y una biblioteca de componentes compartida que múltiples aplicaciones construyen encima.
- ✓Tomar la decisión de edge/CDN/modelo de despliegue y explicar qué compra y qué cuesta.
- ✓Impulsar una migración grande y segura — por ejemplo, una implementación escalonada de Cache Components — sin una reescritura de golpe.
- ✓Establecer convenciones a nivel de organización para obtención de datos, límites de errores, y testing para que los equipos dejen de reinventarlos.
Mejora con
- →Estrategia de plataforma a nivel de organización: caminos dorados, herramientas compartidas, y cómo se inicializan nuevas aplicaciones.
- →Presupuestos de costo y rendimiento a escala — qué cuesta realmente una regresión y cómo la detectas antes de que se envíe.
Filtra las tarjetas por Architect y las categorías Rendering y Core. Trabaja la Guía de Arquitectura completa y los prompts de diseño de sistemas. - 5
Beyond
Frontera: Cache Components, edge, UIs de IA en streaming.
La frontera — donde empujas lo que un frontend de Next.js puede hacer. El objetivo traer capacidad genuinamente nueva y ser pionero en los patrones que el resto del equipo eventualmente adoptará.
Ya puedes
- ✓Ser pionero en patrones de adopción de Cache Components antes de que sean conocimiento común en el equipo.
- ✓Construir UIs de IA con streaming — SSE o el hook use() con Suspense — para respuestas de LLM que se renderizan a medida que llegan.
- ✓Usar View Transitions y <Activity> para hacer que la navegación se sienta como una aplicación en lugar de como una recarga de página.
- ✓Contribuir patrones de renderizado y caché upstream, de vuelta al ecosistema del framework o herramientas internas.
Mejora con
- →Seguir rastreando el borde del framework — las nuevas primitivas llegan rápido, y ser temprano es todo el punto de este nivel.
Filtra las tarjetas por Beyond, y lee los temas de estudio 05, 09. Prueba los prompts de diseño de UI con streaming y migración.