Next.js 6: Enlazar entre páginas
easy⏱ 5 mincoursenextjs
Link vs una etiqueta anchor normal
Un <a href="/about"> normal recarga toda la página desde el servidor — cada script se vuelve a ejecutar, todo el estado del cliente se reinicia. <Link> de Next.js intercepta el clic y hace la navegación en el cliente, manteniendo el JS de tu app corriendo y solo reemplazando el contenido de la página. También hace prefetch de las páginas enlazadas que están visibles en pantalla, así que la navegación se siente instantánea.
import Link from 'next/link';
function NavBar() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</nav>
);
}
// Clicking these navigates without a full page reload,
// and Next.js prefetches them automatically when they scroll into view.
Este sandbox no puede correr next/link
next/link necesita un router real de Next.js, que no existe en este sandbox dentro del navegador. Abajo simulamos la misma experiencia con useState: hacer clic en un ítem de navegación cambia qué componente de 'página' se renderiza, sin recarga completa. La sintaxis real de arriba es lo que realmente enviarías a producción.
Construye una navegación simulada
Crea un NavBar con tres botones/enlaces (Home, About, Contact) y usa useState en App para rastrear cuál página está activa. Renderiza el componente de página correspondiente debajo de la navegación — este es el modelo mental de la navegación del lado del cliente, sin el router real.