Utilizando el componente Link
Clase 7 de 23 • Curso de Next.js 2018
Contenido del curso
Juan David Sánchez
student•
hace 6 años
Manuel Rivera
student•
hace 6 años
René Sanchez
student•
hace 6 años
Clase 7 de 23 • Curso de Next.js 2018
Contenido del curso
Juan David Sánchez
Manuel Rivera
René Sanchez
Juan Castro
Fernando Ontiveros
William Velázquez
Diego Fernando Berrio Meza
Luis Diaz Venero
Leandro Videla
Sergio Toshio Minei
Julio Hurtado
Roberto Gonzalez
Kevin Morales
Fernando Azuaje
Jhon Manuel Angulo Moncada
Diego Ortiz
Carlos Raez
Luis Diaz Venero
Daniel Esteves
Camilo Rivera Quintero
Daniel Muñoz Martín
Jaime David Burbano Montoya
Diego Ortiz
José Antonio aparicio gallego
Carlos Hernandez
Diego Ortiz
Enmanuel castillo
Gabriel De Andrade
Enmanuel castillo
Joaquin Araujo
Job Abdala Coronado Duran
Jesus Garcia
David Daniel Castillo Nava
Desde Next.js 9 el componente Link hace el prefetch de forma automática a medida que los componentes aparezcan en el viewport por lo que no es necesario hacer lo que dice en la clase.
Si se desea eliminar el prefetch para páginas que no se visitan mucho, se puede hacer prefetch={false}.
Exacto bro, bueno aporte
Muy buen aporte 💚
Que grande! Es el primer profesor que avisa cuando va a explicar una pregunta del examen 😂 😂 😂!!
GENIAAAAL!
El curso está increíble ! Vamos paso a paso de manera concreta y simple. Bastante buena la forma de enseñar de Roberto, además bien por esos avisos para el examen 👏🏻
Exacto, todo lo explica con gran claridad! 😄
Hasta ahora no tuve ningún error Roberto Gonzalez es por mucho uno de los mejores profesores de Platzi.
ojala el pudiera dar el curso de React su explicación es muy limpia y no tiene rodeos eso ayuda a que los estudiantes se concentren y no den vueltas mientras aprenden.
estaria bueno para React y todos los de Js tambien :)
Para evitar el Warning que tira en la consola (Each child in a list should have a unique "key" prop.), tenemos que agregar el atributo KEY al <Link>.
<Link href="/channel" key={channel.id} prefetch> <a className="channel"> ..... </a> </Link>
Enlazando Páginas
Next usa un componente llamado <Link/> que debe de contener un <a>.
import Link from 'next/link'; <Link href='/channel'> <a className="channel"> click me </a> </Link>
Nota: El href va en el <Link>. No en el <a>.
Si clickeamos en un Link:
Si abrimos un nuebo tab:
Prefetch
Prefetch le indica a next que el Link es importante y que vaya precargando el contenido por adelantado y así se ahorra un poco de tiempo de carga.
Prefetch solo funciona en producción (npm run build && npm start).
<Link href='/channel' prefetch> <a>...</a> </Link>
Prefetch no precarga getInitialProps. Solo precarga HTML, CSS y JS.
¿Qué pasa si repito prefetch? Por ejemplo, si está dentro de un map().
Cada página solo se precarga una vez.
Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.
Una consulta más bien off topic.
¿que complemente tienes instalado para que funcione emmet en JSX con vcode?
Viene con VSCode! Lo que tenés que hacer es setear el tipo de archivo a Javascript React abajo a la derecha (idealmente para todos los archivos .js, así no tenés que configurarlo a cada rato).
Después sólo sumé la extensión de Styled JSX que te da syntax highlighting en el CSS.
Esto lo pude lograr el poco tiempo que tuve VSCode instalado. Es cuestion de agregarle un par de lineas al archivo settings. Esta respuesta puede servirte ademas de lo que dice Roberto.
ya no es necesario agregar prefetch a Link, Next lo hace por si solo cuando lo corren en modo produccion
Como argumentan los compañeros desde Next 9, ya no es necesario utilizar "prefetch", este viene en true por defecto.
lo que podemos hacer es desactivarlo cuando no lo sea requerido:
prefetch={false}
Cuando lo corro en producción, revisando mi network... se queda haciendo infinitas peticiones a
webpack-hmr?page=/
y a:
webpack-hmr?page=/channel
¿A alguien más le pasa lo mismo? ¿Saben por qué pasa?
Que bueno... y para utilizar Rutas privadas.... es decir con login.... y luego entras a la App??? Muchas gracias
Hola, como lo resolviste?
¡Hola! Este tipo de comportamiento lo puedes manejar con un estado y ese estado se lo pasas a tus rutas que quieres mantener privadas, si el usuario está autorizado o no
Buen Profe!
Habría que tener agregar una vez más el Header a la página donde vamos ?
No se podría hacer cómo en otros frameworks, donde la navegación del lado del cliente se carga en un componente para no tener que llamar una vez más al Header y al Footer por ejemplo ? Gracias !
Si podrías hacerlo. Puedes crear una carpeta llamada Componentes y ahí agregar el header y el footer y solo importas ese componente en tus pages
Al parecer ya no es necesario usar prefetch según este mensaje que me salió en la terminal: Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://err.sh/zeit/next.js/prefetch-true-deprecated
prefetch pregunta de examen Prehistórico
Cuando intento navegar a un channel, me aparece lo siguiente: ++An unexpected error has occurred.++
Alguien me puede ayudar? Por favor
Debes colocar más información en este tipo de preguntas. Como tu archivo index.js, tu archivo channel.js, tu estructura de archivos, etc...
General algún inconveniente el que los archivos sean de extensión .jsx en vez de .js???
Hoy en día no, los archivos .jsx y .js se comportan igual en la mayoría de compiladores, no deberías tener problemas por usar uno o el otro, la decisión va a depender de lo que acuerdes con tu equipo y tus reglas de trabajo :D
General algún inconveniente el que los archivos sean de extensión .jsx en vez de .js???
He notado que al regresar al index desde channel tarda un poco en renderizarlo ¿le pasa a alguien más?
si
excelente explicacion del prefetch
Excelente como explica, todo detallado. De momento me esta gustando el Next.Js.