<Link>

<Link> es un componente de React que extiende el elemento HTML <a> para proporcionar precarga (prefetching) y navegación del lado del cliente entre rutas. Es la forma principal de navegar entre rutas en Next.js.

import Link from 'next/link'

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

import Link from 'next/link'

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

Props

Aquí hay un resumen de las props disponibles para el componente Link:

Bueno saber: Los atributos de la etiqueta <a> como className o target="_blank" pueden agregarse a <Link> como props y se pasarán al elemento <a> subyacente.

href (requerido)

La ruta o URL a la que navegar.

<Link href="/dashboard">Dashboard</Link>

href también puede aceptar un objeto, por ejemplo:

// Navegar a /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  Sobre Nosotros
</Link>

replace

Por defecto es false. Cuando es true, next/link reemplazará el estado actual del historial en lugar de agregar una nueva URL a la pila del historial del navegador.

import Link from 'next/link'

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

import Link from 'next/link'

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

scroll

Por defecto es true. El comportamiento predeterminado de <Link> es desplazarse a la parte superior de una nueva ruta o mantener la posición de desplazamiento para navegación hacia atrás y adelante. Cuando es false, next/link no se desplazará a la parte superior de la página después de una navegación.

import Link from 'next/link'

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

import Link from 'next/link'

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

prefetch

Por defecto es true. Cuando es true, next/link precargará la página (denotada por href) en segundo plano. Esto es útil para mejorar el rendimiento de las navegaciones del lado del cliente. Cualquier <Link /> en el viewport (inicialmente o mediante desplazamiento) será precargado.

La precarga puede desactivarse pasando prefetch={false}. La precarga solo está habilitada en producción.

import Link from 'next/link'

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

import Link from 'next/link'

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

Ejemplos

Enlaces a Rutas Dinámicas

Para rutas dinámicas, puede ser útil usar literales de plantilla para crear la ruta del enlace.

Por ejemplo, puedes generar una lista de enlaces a la ruta dinámica app/blog/[slug]/page.js:

import Link from 'next/link'

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

Middleware

Es común usar Middleware para autenticación u otros propósitos que involucren reescribir al usuario a una página diferente. Para que el componente <Link /> precargue correctamente los enlaces con reescrituras a través de Middleware, debes indicarle a Next.js tanto la URL para mostrar como la URL para precargar. Esto es necesario para evitar solicitudes innecesarias al middleware para conocer la ruta correcta a precargar.

Por ejemplo, si deseas servir una ruta /dashboard que tenga vistas autenticadas y de visitante, puedes agregar algo similar a lo siguiente en tu Middleware para redirigir al usuario a la página correcta:

export function middleware(req) {
  const nextUrl = req.nextUrl
  if (nextUrl.pathname === '/dashboard') {
    if (req.cookies.authToken) {
      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
    } else {
      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
    }
  }
}

En este caso, querrías usar el siguiente código en tu componente <Link />:

import Link from 'next/link'
import useIsAuthed from './hooks/useIsAuthed'

export default function Page() {
  const isAuthed = useIsAuthed()
  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
  return (
    <Link as="/dashboard" href={path}>
      Dashboard
    </Link>
  )
}

Historial de Versiones