El componente <Link> de Next.js permite la navegación interna entre rutas del proyecto sin recargar la página, mejorando la velocidad y la experiencia de usuario.
Por debajo, Next.js prefetch (precarga) las rutas visibles en el viewport, para que las transiciones sean instantáneas.
Importa el componente desde next/link y úsalo en lugar de la etiqueta <a> tradicional.
import Link from 'next/link'
export default function Home() {
return (
<nav>
<Link href="/about">Ir a About</Link>
<Link href="/contact">Contacto</Link>
</nav>
)
}El componente <Link> reemplaza a <a> en la navegación interna.
No recarga la página, mantiene el estado global y mejora el rendimiento.
Puedes usar estilos, componentes hijos o incluso clases dentro de <Link>.
Solo debes incluir un único elemento hijo (como un <span> o <button>).
import Link from 'next/link'
export default function NavBar() {
return (
<nav>
<Link href="/dashboard">
<button className="btn-dashboard">Panel</button>
</Link>
<Link href="/profile">
<span style={{ color: '#6057fb', fontWeight: 'bold' }}>Mi perfil</span>
</Link>
</nav>
)
}Por defecto, Next.js precarga las rutas cuando el enlace aparece en pantalla (si prefetch está activado).
<Link href="/blog" prefetch={false}>
Ir al blog (sin prefetch)
</Link>prefetch={false} si no quieres precargar rutas automáticamente.<Link> solo debe usarse para rutas internas (dentro de tu app Next.js).<a href="https://...">.<Link> con <a> (ya lo maneja internamente).import Link from 'next/link'
export default function Menu() {
return (
<ul>
<li><Link href="/">Inicio</Link></li>
<li><Link href="/productos">Productos</Link></li>
<li><Link href="/contacto" prefetch={false}>Contacto</Link></li>
</ul>
)
}<Link> permite navegación rápida y sin recargas.