La Vanguardia Digital
01El Desafío
Crear un portal de noticias moderno con la ultima version de Next.js y React 19 que ofrezca una experiencia de lectura rapida, navegacion por categorias, y una arquitectura frontend que aproveche las nuevas features del framework: Server Components, App Router, y renderizado optimizado.
02La Solución
Desarrolle un portal de noticias con Next.js (App Router) y React 19 aprovechando Server Components para renderizado rapido, layouts anidados por seccion (deportes, politica, tecnologia, etc.), y componentes modulares reutilizables. La interfaz implementa diseno editorial con tipografia jerarquica, grid responsive de articulos, y navegacion por categorias con rutas dinamicas.
Next.js con App Router: layouts anidados por seccion de noticias, rutas dinamicas [slug] para cada articulo, y Server Components por defecto para rendering rapido
React 19 con las ultimas features: improved hydration, concurrent rendering, y nuevos hooks disponibles en la version mas reciente
Estructura de carpetas por feature: cada seccion de noticias (deportes, politica, tecnologia, economia) tiene su propio layout y pagina
Componentes modulares: ArticleCard, ArticleGrid, CategoryNav, HeroArticle, Sidebar, Footer — cada uno con props tipadas en TypeScript
Diseno editorial con tipografia jerarquica: titulares en fuente serif para autoridad, cuerpo en sans-serif para legibilidad, y jerarquia visual clara entre noticia principal y secundarias
Grid responsive de articulos: layout masonry-like que destaca la noticia principal con imagen grande y muestra las secundarias en grid de 2-3 columnas
Navegacion por categorias con indicador visual de seccion activa y transiciones suaves entre paginas
Dark mode con persistencia en localStorage y transicion CSS para cambio sin flicker
Diseno mobile-first 100% responsive: menu hamburguesa en mobile, sidebar colapsable en tablet, layout completo en desktop
Imagenes optimizadas con next/image: lazy loading automatico, formatos modernos (WebP/AVIF), y sizes responsivos con srcset
Server Components para reducir el JavaScript enviado al cliente — solo los componentes interactivos son Client Components
Metadata SEO con Next.js Metadata API: title, description, Open Graph y Twitter Cards configurados por pagina y por articulo
TypeScript estricto en todo el proyecto: interfaces para Article, Category, Author con tipos compartidos entre componentes
Tailwind CSS para estilos con design tokens consistentes: colores, espaciado y tipografia definidos en el config
ESLint + Prettier configurados para consistencia de codigo en todo el equipo
FLUJO — Navegacion por categorias: [Usuario] click en "Deportes" en CategoryNav → [Next.js App Router] navega a /deportes → [layout.tsx de deportes] renderiza sidebar + header de seccion → [page.tsx] Server Component: fetch de articulos de categoria "deportes" → renderiza ArticleGrid con HeroArticle (destacado grande) + cards secundarias en grid 2-3 columnas → metadata SEO se actualiza con titulo y descripcion de la seccion
FLUJO — Articulo individual: [Usuario] click en ArticleCard → [Next.js] navega a /deportes/[slug] → [Server Component] fetch de articulo por slug → renderiza: titulo (serif grande), autor, fecha con date-fns, imagen hero con next/image priority, cuerpo del articulo, articulos relacionados en sidebar → metadata dinamica: og:title, og:description, og:image del articulo especifico
FLUJO — Server vs Client Components: [Server Components] ArticleGrid, ArticleCard, Footer, CategoryNav estatica → renderizados en el servidor, 0 JS enviado al cliente. [Client Components] solo donde hay interactividad: menu hamburguesa (useState para toggle), dark mode toggle (localStorage + state), buscador (input controlado con onChange) → hidratacion minima, maximo performance
03Stack Tecnológico
Next.js
React 19
TypeScript
Tailwind CSS
App Router
Server Components
04Resultados
React 19Ultima version con nuevos hooks
App RouterLayouts anidados + rutas dinamicas
ServerComponents para rendering rapido
EditorialDiseno con tipografia jerarquica
ResponsiveMobile-first 100% adaptable
SEOMetadata API + Open Graph
05Galería