Componente Link

Al crear enlaces entre páginas en sitios web, normalmente se utiliza la etiqueta HTML <a>.

En Next.js, puedes usar el componente Link de next/link para enlazar entre páginas de tu aplicación. <Link> permite realizar navegación del lado del cliente (client-side) y acepta props que brindan mayor control sobre el comportamiento de navegación.

Uso de <Link>

Primero, abre pages/index.js e importa el componente Link desde next/link agregando esta línea al inicio:

import Link from 'next/link';

Luego encuentra la etiqueta h1 que luce así:

<h1 className={styles.title}>
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

Y cámbiala por:

<h1 className={styles.title}>
  Lee <Link href="/posts/first-post">esta página!</Link>
</h1>

A continuación, abre pages/posts/first-post.js y reemplaza su contenido con lo siguiente:

import Link from 'next/link';
 
export default function FirstPost() {
  return (
    <>
      <h1>Primera Publicación</h1>
      <h2>
        <Link href="/">Volver al inicio</Link>
      </h2>
    </>
  );
}

Como puedes observar, el componente Link es similar a usar etiquetas <a>, pero en lugar de <a href="…">, usas <Link href="…">.

Nota: Antes de Next.js 12.2, era necesario que el componente Link envolviera una etiqueta <a>, pero esto ya no es requerido en versiones 12.2 y superiores.

Verifiquemos si funciona. Ahora deberías tener un enlace en cada página que te permita navegar entre ellas: