Next.js Router Push: Navegación Fácil 2025

En este post, vas a aprender todo sobre Next.js Router Push, casos de uso, recomendaciones y mejores prácticas, considerando la versión actual de estructura de app de Next.js.

Navegación Imperativa vs Navegación Declarativa

En Next.js, la navegación se puede hacer de dos maneras: imperativa y declarativa.

Imperativo: Significa que tú controlas la navegación, y puedes hacerlo programáticamente.

Declarativo: Significa que la navegación se define a nivel componente, y se ejecuta por interacciones del usuario

Un ejemplo de navegación imperativa es cuando haces un router.push para redirigir a otra página. Veremos más sobre esto en detalle en la siguiente sección.

Un ejemplo de navegación declarativa es cuando usas un componente Link de Next.js para definir la navegación. Este componente se encarga de la navegación por ti, y es muy útil para enlaces y menús.

Es importante que elijas el tipo de navegación correcto para cada caso, ya que cada uno tiene sus casos de uso.

• La navegación imperativa es útil para redirecciones, validaciones, y casos donde necesitas controlar la navegación.
• La navegación declarativa es útil para enlaces, menús, y casos donde la navegación es parte de la interfaz de usuario.

En general, te recomiendo que uses la navegación declarativa siempre que sea posible, ya que es más fácil de mantener y menos propensa a errores.

Next.js Router Push: useRouter en Next.js

En Next.js, puedes usar el hook useRouter para acceder al router y hacer navegación imperativa en componentes de tipo cliente.

Esto significa que el hook useRouter, por naturaleza, no está disponible en componentes de servidor.

Ejemplo de uso de useRouter en un componente de tipo cliente:

'use client'

import { useRouter } from 'next/navigation'

const isPurchaseDone = true

export default function Page() {
  const router = useRouter()

  if (isPurchaseDone) {
    router.push('/thank-you')
  }

  return <div>Processing...</div>
}

En este ejemplo, usamos useRouter para acceder al router y hacer una redirección a la página /thank-you si la compra está hecha.

Este es sólo un ejemplo sencillo, va a depender de tu lógica y el caso de uso que quieras implementar.

¿Quieres aprender más sobre Next.js? Descarga mi kit de recursos para desarrolladores con mini ebooks, roadmap y más.

Cómo Utilizar router.push Correctamente

Si Next.js tiene diferentes maneras de hacer navegación, ¿cómo saber cuándo usar router.push?

Considera el siguiente ejemplo:

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

En este ejemplo, usamos useRouter para acceder al router y hacer una redirección a la página /dashboard cuando se hace click en el botón.

¿Pero es lo mejor?

Cuando se trate de navegación por interacciones del usuario, como clicks a enlaces, menus, y botones, es mejor usar el componente Link de Next.js.

El componente Link se encarga de la navegación por ti, y es más fácil de usar y mantener que router.push.

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard">
      <a>Dashboard</a>
    </Link>
  )
}

Y si lo necesitas, podrías tener tu componente como tipo server debido a que ya no accedes a un hook de cliente.

Entonces, ¿Cuándo utilizar router.push? Pasemos a la siguiente sección para responderlo.

Casos de Uso Comunes de router.push

Te recomiendo utilizar router.push si tienes alguno de los siguientes casos de uso:

Router Push Nueva Pestaña

router.push está diseñado para navegar en la misma pestaña. Para abrir una página en una nueva pestaña, es mejor usar window.open('/perfil', '_blank').

Pasar Estado o Props

Puedes pasar datos al navegar utilizando query strings. Ejemplo:

router.push({
  pathname: '/perfil',
  query: { id: 1 },
})

En la página de destino, usa useSearchParams para obtener los parámetros.

import { useSearchParams } from 'next/navigation'

export default function Perfil() {
  const [searchParams] = useSearchParams()
  const id = searchParams.get('id')

  return <div>Perfil {id}</div>
}

Redirecciones Basadas en Lógica de Negocio

router.push puede usarse después de verificar condiciones de negocio, y que por necesidades de tu proyecto, se debe hacer desde un componente cliente.

Por ejemplo, es posible que quieras redirigir al dashboard si un inicio de sesión es exitoso o a la página de login si no lo es, si tu mecanismo de autenticación lo haces desde el lado del cliente.

Navegación en Respuesta a Eventos

Es útil navegar después de ciertos eventos, como enviar un formulario. Por ejemplo, redirigir a una página de agradecimiento tras completar un formulario:

Estas situaciones comunes muestran cómo router.push puede mejorar la experiencia del usuario de manera sencilla.

Preguntas Frecuentes

1. ¿Cuándo debería usar router.push y cuándo debería usar Link?

Si necesitas navegar de manera simple y declarativa, el componente Link es la mejor opción, ya que optimiza automáticamente la precarga de rutas y mejora la experiencia de usuario. Usa router.push si la navegación depende de una condición o si ocurre como respuesta a una acción específica del usuario.

2. ¿Es mejor usar router.push o redirect desde el lado del servidor?

redirect() desde el lado del servidor es mejor cuando quieres asegurarte de que los usuarios no autorizados nunca lleguen a ver contenido restringido, incluso si intentan acceder directamente mediante la URL. router.push es más adecuado para redirecciones que dependen de acciones en el lado del cliente.

3. ¿Puedo usar router.push para abrir una nueva pestaña?

No, router.push no está diseñado para abrir nuevas pestañas. Si necesitas abrir una página en una nueva pestaña, utiliza window.open(url, '_blank').

4. ¿Cuándo debo usar router.replace en lugar de router.push?

Usa router.replace cuando no quieras que la navegación genere un nuevo registro en el historial del navegador. Esto es útil cuando actualizas la URL sin querer que el usuario pueda volver atrás a la página anterior, como después de completar un formulario.

5. ¿Qué diferencia hay entre la navegación con router.push y la redirección desde el middleware?

La redirección desde el middleware ocurre antes de que la página se renderice, lo cual es útil para aplicar reglas de acceso o lógica que debe ser ejecutada antes de llegar al cliente. router.push, por otro lado, se usa después de que la página ya se ha cargado y se necesita navegar según acciones realizadas por el usuario.

6. ¿Cómo puedo manejar redirecciones condicionales con router.push?

Puedes usar router.push para manejar redirecciones condicionales en función de cierta lógica. Por ejemplo, después de una verificación de autenticación, podrías redirigir al usuario al dashboard si está autenticado o a la página de inicio de sesión si no lo está.

7. ¿Es router.push adecuado para todas las navegaciones dentro de una aplicación Next.js?

No necesariamente. router.push es ideal para la navegación imperativa, donde la navegación ocurre en respuesta a un evento específico del usuario o cuando se necesita lógica condicional. Para una navegación más simple y estática, es mejor utilizar Link o incluso redirecciones desde el lado del servidor en ciertos casos.

Conclusión

En esta guía, aprendiste cómo usar router.push en Next.js para hacer navegación imperativa en tus aplicaciones. Vimos ejempjsones de uso, casos comunes, y preguntas frecuentes para ayudarte a entender mejor cómo y cuándo usar router.push.

Si quieres aprender más de Next.js, te recomiendo que descargues mi Kit de recursos de Next.js, donde encontrarás mini ebooks, roadmap, y más.