Enlaces y Navegación

El enrutador de Next.js permite realizar transiciones de ruta del lado del cliente entre páginas, similar a una aplicación de una sola página (SPA).

Se proporciona un componente React llamado Link para realizar esta transición de ruta del lado del cliente.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Inicio</Link>
      </li>
      <li>
        <Link href="/about">Acerca de</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Artículo del Blog</Link>
      </li>
    </ul>
  )
}

export default Home

El ejemplo anterior utiliza múltiples enlaces. Cada uno mapea una ruta (href) a una página conocida:

• / → pages/index.js
• /about → pages/about.js
• /blog/hello-world → pages/blog/[slug].js

Cualquier <Link /> en el viewport (inicialmente o mediante scroll) será prefetchado por defecto (incluyendo los datos correspondientes) para páginas que usan Generación Estática. Los datos correspondientes para rutas renderizadas en el servidor se obtienen solo cuando se hace clic en el <Link />.

Enlaces a rutas dinámicas

También puedes usar interpolación para crear la ruta, lo cual es útil para segmentos de ruta dinámicos. Por ejemplo, para mostrar una lista de publicaciones que se han pasado al componente como prop:

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

En el ejemplo se usa encodeURIComponent para mantener la ruta compatible con utf-8.

Alternativamente, usando un Objeto URL:

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

Ahora, en lugar de usar interpolación para crear la ruta, usamos un objeto URL en href donde:

• pathname es el nombre de la página en el directorio pages. /blog/[slug] en este caso.
• query es un objeto con el segmento dinámico. slug en este caso.

Inyección del enrutador

Para acceder al objeto router en un componente React puedes usar useRouter o withRouter.

En general recomendamos usar useRouter.

Navegación Imperativa

next/link debería cubrir la mayoría de tus necesidades de enrutamiento, pero también puedes hacer navegaciones del lado del cliente sin él, revisa la documentación de next/router.

El siguiente ejemplo muestra cómo hacer navegaciones básicas de página con useRouter:

import { useRouter } from 'next/router'

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

  return (
    <button onClick={() => router.push('/about')}>
      Haz clic aquí para leer más
    </button>
  )
}

Enrutamiento Superficial (Shallow Routing)

El enrutamiento superficial te permite cambiar la URL sin volver a ejecutar los métodos de obtención de datos, lo que incluye getServerSideProps, getStaticProps y getInitialProps.

Recibirás el pathname actualizado y el query a través del objeto router (agregado por useRouter o withRouter), sin perder el estado.

Para habilitar el enrutamiento superficial, establece la opción shallow en true. Considera el siguiente ejemplo:

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// La URL actual es '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Siempre hacer navegaciones después del primer renderizado
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // ¡El contador cambió!
  }, [router.query.counter])
}

export default Page

La URL se actualizará a /?counter=10 y la página no se reemplazará, solo cambia el estado de la ruta.

También puedes observar cambios en la URL mediante componentDidUpdate como se muestra a continuación:

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // verificar que las props hayan cambiado para evitar un bucle infinito
  if (query.counter !== prevProps.router.query.counter) {
    // obtener datos basados en la nueva query
  }
}

Advertencias

El enrutamiento superficial solo funciona para cambios de URL en la página actual. Por ejemplo, supongamos que tenemos otra página llamada pages/about.js y ejecutas esto:

router.push('/?counter=10', '/about?counter=10', { shallow: true })

Como es una nueva página, descargará la página actual, cargará la nueva y esperará la obtención de datos aunque hayamos solicitado un enrutamiento superficial.

Cuando el enrutamiento superficial se usa con middleware, no garantiza que la nueva página coincida con la página actual como se hacía anteriormente sin middleware. Esto se debe a que el middleware puede reescribir dinámicamente y no se puede verificar del lado del cliente sin una obtención de datos que se omite con shallow, por lo que un cambio de ruta superficial siempre debe tratarse como superficial.