Enlazando páginas

Next.JS reuiere que dentro del componente de Link se encuentre una etiqueta <a></a>, de forma que sea amigable para el SEO. Si no la agregas, de igual forma funciona, pero verás un warning de parte de Next.JS.

Pueden ver un poco más de información de como trabajar con Styled Components o Componentes que envuelven la etiqueta <a> aquí: Next Link

El elemento <menu> está desaprobado.
https://developer.mozilla.org/es/docs/Web/HTML/Element/menu

Lo que se aconseja es usar <ul> dentro de <nav>
https://developer.mozilla.org/es/docs/Web/HTML/Element/nav

Version 13.0.0 de nextjs es necesario agregar la prop legacyBehavior para poder usar el tag a dentro de Link:

<Link href="/" legacyBehavior><a>Home</a></Link>

https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-tag

🖇️ Enlazando páginas

Anchor.- Anclaje, nos sirve para hacer hipervínculos

Para poder hacer un enlace de paginas debemos importar el componente Link de Next.js, como propiedad se pasa un href el cual sera la ruta que deseemos ir y este debe contener una etiqueta anchor

import React from "react";
import Link from "next/link";

const Navbar = () => {
  return (
    <nav>
      <menu>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/about">
          <a>About</a>
        </Link>
      </menu>
    </nav>
  );
};

export default Navbar;

RESUMEN: Con la etiqueta Link de Next.js podemos direccionar las rutas de nuestra aplicación

Para los que estamos viendo en 2022, ya no se usa la etiqueta <menu>, y tampoco <a> puede ser hijo de <Link>

const Navbar = () => {
    return (
        <div>
            <nav>
                <ul>
                    <li>
                        <Link href="/">Home</Link>
                    </li>
                    <li>
                        <Link href="/about">About Us</Link>
                    </li>
                </ul>
            </nav>
        </div>
    )
}

Que bonito me gusta me encanta

href va en el componente Link, no en a.

Como actualización para el 2022 no se utiliza la etiqueta <menú> (descontinuada) ni la etiqueta <a> dentro de Link. En caso de que quieras usar <a> debe ser:

<Link href="/" legacyBehavior><a>Home</a></Link>

La etiqueta <a></a> dentro de <Link></Link> ahora solo vale para enlaces externos (Antes se utilizaba por SEO)

Ahora, por accesibilidad y varias otras razones se debería usar <nav> <ul> <li> para el menú. Quedando de esta manera:

  <div>
       <nav>
           <ul>
               <li>
               <Link href='/'>
                   Home
               </Link>
               </li>
               <li>
               <Link href='/about'>
                   About
               </Link>
               </li>
           </ul>
       </nav>
   </div>

Con el prefetch el contenido es descargado detras de escenas , basado en la suposicion de que éste sera usado en un futuro, permitiendo que cargue inmediatamente cuando el usuario lo requiera. Una gran virtud que nos da Next =D

A partir de la versión 12.2 de NextJS ya no es necesario poner el tag <a> dentro de <Link>. Simplemente poner el <Link> con el href dentro y funciona.

Aquí el link a la documentación:
https://nextjs.org/learn/basics/navigate-between-pages/link-component

Tengo una duda, me confundí un poco con lo del Link.
¿Si utilizamos Link para hacer el routing de una SPA en nuestra aplicación Next, no estamos perdiendo el poder del pre-render del SSR?

Para las últimas versiones de Next ya NO es necesario poner un anchor hijo dentro del componente Link, es decir que si antes usábamos

<Link href="/">
	<a>Home</a>
</Link>

Ahora podemos usar

<Link href="/">Home</Link>

O en caso de que quieran seguir usando la versión explicada en el curso, hay que usar la palabra legacyBehaviorpara que no nos salga error en el navegador.

<Link href="/" legacyBehavior>
	<a>Home</a>
</Link>

El componente Navbar.js

import React from 'react'
import Link from "next/link";

export const Navbar = () => {
    return (
        <nav>
            <ul>
                <li>
                    <Link href="/">
                        <a>Home</a>
                    </Link>
                </li>
                <li>
                <Link href="/about">
                    <a>About</a>
                </Link>
                </li>
            </ul>
        </nav>
    )
}

Seria adecuado que por favor actualizan el contenido, dado que esta utilidad es imprescindible, gracias

no conocía la etiqueta <menu> https://www.w3schools.com/tags/tag_menu.asp

Es un poco curioso que dijo al principio que no se iba a detener en conceptos básicos de Node, porque se asumen aprendidos, y se detiene en el efecto del anchor en el browser. Lo digo porque creo que es más probable que alguien que esté aprendiendo Next, sepa React a que sepa Node.

Navbar.js actualizado

import React from 'react'
import Link from 'next/link';

const Navbar = () => {
  return (
      <nav>
        <ul>
          <li><Link href='/'><a>Home</a></Link></li>
          <li><Link href='/about'><a>About</a></Link></li>
        </ul>
      </nav>
  )
}

export default Navbar;

Increíble explicación! Muchas gracias.

La etiqueta <menu> está descontinuada en html5

y sin react router 😮

Utilizando la versión 13 de Next Js ya el link no se debe poner con la etiqueta

<a> adentro,  <Link href="/about"> About</Link>

De hecho una de las “desventajas” que tiene Nextjs es que cada vez que se actualiza la pagina, el servidor hace el computo para el html y se lo manda a el cliente listo para renderizar. Pero con Link, esto ya no pasa, porque se crea una SPA…

Unhandled Runtime Error
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

tengo este error y se soluciono de esta manera, retirando los a tag:

import React from "react"
import Link from "next/link"

const NavBar = () => {
    return (
        <div>
            <nav>
                <menu>
                    <Link href="/">Home</Link>
                    <Link href="/about">About</Link>
                </menu>
            </nav>
        </div>
    )
}

export default NavBar

Link
https://nextjs.org/docs/api-reference/next/link

si en algun momento aparece un mensaje rror: Multiple children were passed to <Link> with href of /about but only one child is supported https://nextjs.org/docs/messages/link-multiple-children sobre que no acepta multiple hijos solo revisen que no haya espacio entre los cierres
Ej:

<Link href="/">  <a>Home</a>  </Link>
        <Link href="/about">  <a>About</a> </Link>

No tiene nada que ver con el tema de esta clase, pero que extension usas para ver las tabulaciones en diferentes colores?

Enlazando páginas

A diferencia de React Router, NextJS require que su etiqueta Link tenga adentro la etiqueta <a></a> para mejoras del SEO.

import React from 'react'
import Link from 'next/link'

const Navbar = () => {
  return (
    <nav>
      <menu>
        <Link href='/'>
          <a>Home</a>
        </Link>

        <Link href='/about'>
          <a>About</a>
        </Link>
      </menu>
    </nav>
  )
}

export default Navbar

Actualmente

import React from 'react';
import Link from 'next/link';

const Navbar = () => {
  return (
    <nav>
      <menu>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
      </menu>
    </nav>
  );
};

export default Navbar;

Ya en el 2023 se tiene que quitar las “a”

Coloque un ejemplo con useRouter

'use client'
import Link from 'next/link'
import { useRouter } from 'next/navigation'

const NavBar = () => {
  const router = useRouter()
  return (
    <nav>
      <menu>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <button type="button" onClick={() => router.push('/product/1')}>
          Product
        </button>
      </menu>
  </nav>
  )
}

export default NavBar

Ya no es necesario usar la etiqueta a dentro de etiqueta Link, el renderizado de la pagina ya lo hace por nosotros, para verificar que sea cierto pueden consultar el inspeccionador de elementos

A mi me da un error cuando queda el elemento “a” dentro del componente Link:

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

A mi no me funciona con esa ruta “…/components/Navbar/Navbar”

la cambié a “…/components/Navbar” y ya funciona.

Nota: Si están utilizando las últimas versiones de NextJs, deben aregar legacyBehavior al Link sino les marcará un error
También es recomendado poner passHref en el Link para que pase de manera forzada el href a su hijo

<Link href='/about' passHref legacyBehavior>
                <a>About</a>
 </Link>

Execelente explicación💚

La etiqueta a dentro de Link, me genera error. Tuve que cambiarla por otra etiqueta 😉.

falto explicar por que esta usando minusculas en nextjs en react todos los componentes van en mayusculas pero en nextjs cambia

Solo por esto ya vale la pena aprender Next.JS ¡¡Configurar y aprender Router me rompía la cabeza hace un tiempo!! ¿Y la estructura de páginas ayuda al SEO? Denme más.

Mas informacion acerca de link de next https://nextjs.org/docs/routing/dynamic-routes

Conectando Paginas

/
En el caso de querer pasar de una página de nuestra aplicación a otra sin escribir la dirección de la misma directamente en el navegador, podemos utilizar el componente Link, que ya viene en Next.js, por lo que sólo tenemos que importar ese mismo componente y ponerlo dentro del componente que lo requiera, y luego escribir dentro del componente Link el elemento sobre el que se debe clickear para ir a otra página, de esta forma sólo tendremos que pulsar sobre el elemento que está dentro del componente Link.
/

const MainMenu = () => (
    <nav>
        <ul>
            <li>
                <Link href="/">
                    <a>
                        Home
                    </a>
                </Link>
            </li>
            <li>
                <Link href="/about">
                    <a>
                        About us
                    </a>
                </Link>
            </li>
            <li>
                <Link href="/contact">
                    <a>
                        Contact us
                    </a>
                </Link>
            </li>
        </ul>
    </nav>
)

export default MainMenu

/
Advertencia: Realmente vale la pena decir que antes de escribir el elemento sobre el que se va a hacer click, tenemos que poner la etiqueta <a></a>, y a partir de ahí, escribir el citado elemento, para que el SEO de nuestra aplicación, sea mejor.

Recordar usar el PascalCase o mejor dicho empezar el react component con mayuscula para que les pueda renderizar.

Otra cosa que agrega Nextjs, es que usando Link el hace por default prefetch de estas paginas para tenerlas disponibles al momento de que sean solicitadas.

Hola! cuando intento enlazar Link, me da el siguiente error:

“Error: link is a void element tag and must neither have children nor use dangerouslySetInnerHTML.”.

Que habre hecho mal?