Sebastian Gomez

Feb 21, 2022

Updated: Jun 24, 2026

Navegación entre rutas en Next.js

Next.js es un potente marco de trabajo que nos ayuda a construir aplicaciones web rápidas y eficientes. En este artículo exploraremos algunas características muy útiles que nos permiten navegar y optimizar la navegación dentro de nuestras aplicaciones.

Actualizado para Next.js 16 y React 19. Los conceptos de este post (navegación del lado del cliente, rutas dinámicas y enrutamiento programático) siguen plenamente vigentes, pero la API cambió bastante desde 2022. Todo el código de aquí está escrito para el App Router, que es el enfoque recomendado hoy. Más abajo te explico la diferencia con el viejo Pages Router por si mantienes un proyecto heredado.

Pages Router frente a App Router

Antes de empezar, conviene ubicarse. Next.js tiene hoy dos sistemas de enrutamiento:

• Pages Router (pages/): el modelo clásico, anterior a Next.js 13. Usaba next/router y una sintaxis de <Link> que ya quedó obsoleta. Sigue soportado, pero ya no es lo recomendado para proyectos nuevos.
• App Router (app/): estable desde Next.js 13.4 y el modo por defecto desde Next.js 14. Se basa en React Server Components, carpetas como rutas, archivos especiales (page.jsx, layout.jsx) y los hooks de next/navigation.

En este artículo usaremos el App Router, porque es lo que encontrarás en cualquier proyecto de Next.js 16 recién creado.

El componente Link

El componente Link es similar al tag <a> de HTML y vive en el módulo next/link. Nos permite hacer enrutamiento del lado del cliente, es decir, navegar entre páginas sin recargar todo el sitio.

Ejemplo:

<Link href="/settings">settings</Link>

Cambio importante respecto a tutoriales antiguos: Antes había que envolver un <a> dentro de Link (<Link href="/settings"><a>settings</a></Link>). Desde Next.js 13 ese patrón quedó obsoleto y en Next.js 16 fue removido por completo: ahora Link renderiza el <a> por ti. Simplemente pon el contenido directamente dentro de Link.

Para las rutas dinámicas ya no necesitas la antigua prop as. Solo construye la URL final y pásala directamente al href:

<Link href={`/user/${user.id}`}>user</Link>

Creando una aplicación de notas

Veamos cómo podemos enlazar nuestras páginas en una aplicación de notas usando el componente Link. Con el App Router, cada ruta es una carpeta con un archivo page.jsx.

app/notes/[id]/page.jsx

// Esta directiva marca el archivo como Componente de Cliente para poder usar hooks
'use client'

// Importa el hook 'useParams' de 'next/navigation' para leer los parametros de la ruta
import { useParams } from 'next/navigation'

// Importa el componente 'Link' de 'next/link' para navegar entre paginas
import Link from 'next/link'

// Componente con nombre exportado por defecto (mejor que una funcion anonima)
export default function NotePage() {
  // 'useParams' nos da los parametros dinamicos de la ruta; aqui extraemos 'id'
  const { id } = useParams()

  return (
    <div>
      {/* Titulo que muestra el valor de 'id' obtenido de la ruta */}
      <h1>Note: {id}</h1>

      {/* 'Link' para navegar a la pagina de 'notes' sin recargar la app */}
      <Link href="/notes">Notes</Link>
    </div>
  )
}

Nota: useParams es un hook de cliente, por eso el archivo lleva la directiva 'use client' en su primera línea. Si prefieres un Server Component, lee el id desde la prop params que Next.js pasa a la página. en Next.js 15 y 16 params puede entregarse como una promesa en Server Components (const { id } = await params); confirma la forma exacta para tu versión menor antes de publicar.

app/notes/page.jsx

// Importa el componente 'Link' de 'next/link' para navegar entre paginas
import Link from 'next/link'

// Componente con nombre exportado por defecto
export default function NotesPage() {
  // Crea un arreglo de 15 objetos 'note' con propiedades 'id' y 'title'
  const notes = new Array(15).fill(1).map((e, i) => ({ id: i, title: `Note: ${i}` }))

  return (
    <div>
      {/* Titulo de la pagina */}
      <h1>Notes</h1>

      {/* Itera sobre el arreglo de notas y renderiza un enlace por cada una */}
      {notes.map((note) => (
        // Contenedor de la nota individual; la 'key' va en el elemento mas externo
        <div key={note.id}>
          {/* Pasamos la URL final directamente al 'href': ya no se usa la prop 'as' */}
          <Link href={`/notes/${note.id}`}>
            <strong>{note.title}</strong>
          </Link>
        </div>
      ))}
    </div>
  )
}

app/page.jsx

import Link from 'next/link'

export default function IndexPage() {
  return (
    <div>
      <h1>Index page</h1>
      <Link href="/notes">Notes</Link>
    </div>
  )
}

Cambiando de rutas desde JavaScript

Cuando necesitamos cambiar de ruta desde nuestro código JavaScript en lugar de usar el componente Link, podemos utilizar el objeto router y su método push para hacer enrutamiento programático. En el App Router, el hook useRouter se importa desde next/navigation y solo funciona dentro de Componentes de Cliente.

Ejemplo:

// Esta directiva marca el archivo como Componente de Cliente para poder usar hooks y eventos
'use client'

// Importa el hook 'useRouter' de 'next/navigation' (no de 'next/router')
import { useRouter } from 'next/navigation'

// Componente con nombre exportado por defecto
export default function NavigationButtons() {
  // 'useRouter' nos da una instancia del enrutador de Next.js
  const router = useRouter()

  // Define la constante 'id' con un valor de 2
  const id = 2

  return (
    <div>
      {/* Boton que navega a la pagina de inicio '/' */}
      <button onClick={() => router.push('/')}>
        Go Home
      </button>

      {/* Boton que navega a '/user/<id>': se pasa la URL final ya resuelta */}
      <button onClick={() => router.push(`/user/${id}`)}>
        Dashboard
      </button>
    </div>
  )
}

Cambio importante: En el viejo Pages Router, router.push aceptaba un segundo argumento as (router.push('/user/[id]', '/user/' + id)). En el App Router eso ya no existe: pasas la URL final directamente como único argumento.

Conclusiones

• El componente Link nos permite hacer enrutamiento del lado del cliente en nuestras aplicaciones Next.js, con un enfoque similar al tag <a> de HTML, pero ya no debes envolver un <a> dentro de él.
• Para enlazar rutas dinámicas, ya no se usa la prop as: simplemente construye la URL final y pásala al href.
• El hook useRouter (de next/navigation) y su método push nos permiten hacer enrutamiento programático, cambiando de ruta directamente desde nuestro código JavaScript.

Ejercicios para practicar

1. Crea una aplicación Next.js 16 básica con al menos tres páginas diferentes (por ejemplo, Inicio, Acerca de y Contacto) e implementa la navegación usando el componente Link.
2. Agrega una ruta dinámica a tu aplicación, como app/products/[id]/page.jsx, y crea enlaces a diferentes productos pasando la URL final al href (sin la prop as).
3. Implementa enrutamiento programático con useRouter de next/navigation y su método push. Por ejemplo, crea un formulario de búsqueda y navega a una página de resultados según la entrada del usuario.

Resumen en 3 puntos

1. El componente Link de Next.js facilita la navegación del lado del cliente; en Next.js 16 renderiza el <a> por ti, así que ya no debes incluirlo manualmente.
2. Las rutas dinámicas se manejan pasando la URL final directamente al href; la antigua prop as quedó obsoleta.
3. El enrutamiento programático se logra con el hook useRouter de next/navigation y su método push, dándote más flexibilidad al cambiar rutas desde el código JavaScript.

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente. Si tienes alguna pregunta, opinión o quieres añadir algo, no dudes en dejar un comentario aquí abajo. Y si te gustó, no olvides compartirlo en tus redes sociales. ¡Buena suerte!