🛣️ Navegación entre páginas con Link y useRouter

07 - 🛣️ Navegación entre páginas con Link y useRouter

Aprende cómo moverte entre diferentes páginas en Next.js utilizando los componentes Link y useRouter, dos herramientas esenciales para crear una navegación fluida sin recargar la aplicación.

---

🔗 Navegación con el componente Link

En Next.js, el componente Link reemplaza al clásico <a> de HTML y permite una navegación entre páginas rápida y sin recargas, aprovechando la renderización del lado del cliente.

Ejemplo básico:

import Link from 'next/link';

export default function Home() {
  return (
    <div className="text-center mt-5">
      <h1 className="text-2xl font-bold mb-4">Página Principal</h1>
      <Link href="/about" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
        Ir a la página “About”
      </Link>
    </div>
  );
}
      

🧩 Resultado visual:

Ir a la página “About”

💡 Consejo: El componente Link solo debe usarse para navegar dentro del mismo proyecto Next.js. Para enlaces externos, usa un <a> normal con target="_blank" si es necesario.

---

⚙️ Navegación programática con useRouter

El hook useRouter te permite controlar la navegación desde el código. Es muy útil para redirigir al usuario después de una acción (como enviar un formulario o hacer clic en un botón).

'use client';
import { useRouter } from 'next/navigation';

export default function Contact() {
  const router = useRouter();

  function handleClick() {
    router.push('/success');
  }

  return (
    <div className="text-center mt-5">
      <h1 className="text-2xl font-bold mb-4">Formulario de contacto</h1>
      <button onClick={handleClick} className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition">
        Enviar y redirigir
      </button>
    </div>
  );
}
      

🧩 Resultado visual:

• ✅ router.push('/ruta'): redirige al usuario a una página específica.
• 🔙 router.back(): vuelve a la página anterior.
• 🔁 router.refresh(): recarga los datos de la ruta actual.

---

📊 Comparativa rápida

Herramienta	Uso principal	Tipo de navegación
Link	Enlaces visibles en la interfaz	Manual
useRouter	Redirecciones automáticas desde funciones	Programática

---

🧩 Ejemplo combinado — Link + useRouter

En este ejemplo combinamos ambos métodos de navegación. Usamos un Link para navegación directa y un button con router.push() para redirigir desde una acción de usuario.

'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

export default function NavegacionEjemplo() {
  const router = useRouter();

  return (
    <div className="text-center mt-5 space-y-4">
      <h2 className="text-2xl font-semibold">Navegación en Next.js</h2>

      <Link href="/blog" className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        Ver Blog
      </Link>

      <button onClick={() => router.push('/contact')} className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
        Ir al Contacto
      </button>
    </div>
  );
}
      

🧩 Resultado visual:

Ver Blog

💡 Consejo: Usa Link para menús, encabezados o listas de navegación, y useRouter para redirecciones automáticas después de eventos o acciones del usuario.

← Volver al índice