No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

Enlazando páginas

8/27
Recursos

Aportes 25

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

🖇️ Enlazando páginas

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>

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

href va en el componente Link, no en a.

Que bonito me gusta me encanta

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

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?

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

Increíble explicación! Muchas gracias.

La etiqueta <menu> está descontinuada en html5

y sin react router 😮

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>
    )
}
Excelente explicación! Eso está genial!

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;

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

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

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>

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

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.

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…

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?