Puente a Next.js: tu landing como app con rutas

React te da componentes; Next.js los convierte en SITIOS completos: con rutas, con páginas que se renderizan en el servidor (rápidas y buenas para SEO), y con interactividad solo donde hace falta. Tomamos la landing del módulo 16 y la vemos como una app de Next. Dato curioso: esta misma plataforma que estás usando está hecha con Next.js.

El vecindario con sistema de direcciones

Ruteo por archivos: la carpeta es la URL

app/
page.tsx              →  /                (la landing del módulo 16)
precios/page.tsx      →  /precios
blog/[slug]/page.tsx  →  /blog/mi-articulo   (ruta dinámica)
layout.tsx            →  envoltorio compartido (nav + footer en todas)

No hay router que configurar: la ESTRUCTURA de carpetas ES el mapa del sitio. Tu landing del módulo 16 se vuelve app/page.tsx; agregar una página de precios es crear app/precios/page.tsx. El layout.tsx es el header/ footer que ya repetías en cada página, ahora declarado UNA vez y aplicado a todas.

Servidor por defecto, cliente cuando hace falta

Este es el superpoder de Next: la mayoría de tu página se arma en el SERVIDOR (rápida, sin enviar JavaScript), y solo las piezas interactivas corren en el cliente.

// COMPONENTE DE SERVIDOR (por defecto): corre en el servidor, no envía JS
export default async function Home() {
const noticias = await getNoticias();   // puedes hacer fetch/DB aquí mismo
return (
  <main>
    {noticias.map((n) => <Tarjeta key={n.id} titulo={n.titulo} />)}
  </main>
);
}

"use client";   // ← solo esta pieza es interactiva y envía JS al navegador
import { useState } from "react";

export function Menu() {
const [abierto, setAbierto] = useState(false);   // el menú del módulo 14, ahora componente
return <button onClick={() => setAbierto(!abierto)}>Menú</button>;
}

El cambio mental: tu index.html único se vuelve un ÁRBOL de rutas donde casi todo se renderiza en el servidor (el header, el hero, las tarjetas —llegan listos, con buen SEO y sin JS), y solo las "islas" interactivas (el menú, un modal) llevan el "use client" y envían JavaScript. Es la mejora progresiva del módulo 8, ahora como arquitectura del framework.

Mini-reto

Dibuja en papel el árbol de rutas de tu landing del módulo 16 convertida en app de Next: ¿qué sería app/page.tsx? ¿qué páginas nuevas agregarías (/precios, /contacto) y qué carpetas necesitan? ¿qué partes son de servidor (el hero, las secciones) y cuáles llevarían "use client" (el menú, un formulario)? Ese mapa mental es justo con el que arrancarás su curso.

Qué sigue

Next lleva React a sitios completos con JavaScript optimizado. El siguiente puente va al extremo opuesto de la balanza: Astro, que construye la MISMA landing enviando CERO JavaScript por defecto — y solo "hidrata" las islas que de verdad lo necesitan. Máxima velocidad para sitios de contenido.