Guías Técnicas

Componente Link en Next.js - Navegación Optimizada sin Recarga

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.

1Uso básico de

Importa el componente desde next/link y úsalo en lugar de la etiqueta <a> tradicional.

jsx 
import Link from 'next/link'

export default function Home() {
return (
  <nav>
    <Link href="/about">Ir a About</Link>
    <Link href="/contact">Contacto</Link>
  </nav>
)
}
  Nota

El componente <Link> reemplaza a <a> en la navegación interna.
No recarga la página, mantiene el estado global y mejora el rendimiento.

2Link con estilos o hijos personalizados

Puedes usar estilos, componentes hijos o incluso clases dentro de <Link>.
Solo debes incluir un único elemento hijo (como un <span> o <button>).

jsx 
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>
)
}

3Prefetch y comportamiento avanzado

Por defecto, Next.js precarga las rutas cuando el enlace aparece en pantalla (si prefetch está activado).

jsx 
<Link href="/blog" prefetch={false}>
Ir al blog (sin prefetch)
</Link>
  Tips útiles

  • Usa prefetch={false} si no quieres precargar rutas automáticamente.
  • <Link> solo debe usarse para rutas internas (dentro de tu app Next.js).
  • Para enlaces externos, sigue usando <a href="https://...">.
  • En Next.js 15, no es necesario envolver <Link> con <a> (ya lo maneja internamente).

🚀 Ejemplo final

jsx 
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>
)
}
  Resumen

  • <Link> permite navegación rápida y sin recargas.
  • Funciona solo con rutas internas.
  • Next.js hace prefetch automático de las rutas visibles.
  • Mejora el rendimiento y UX de forma inmediata.