Utilizando el componente Link

Clase 7 de 23 • Curso de Next.js 2018

Resumen

En esta clase vamos a ver como linkear páginas nuevas, y sobre todo cómo funciona el router de Next.js en mayor detalle.

Juan David Sánchez

student•

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}.

Manuel Rivera

student•

Exacto bro, bueno aporte

René Sanchez

student•

Muy buen aporte 💚

Juan Castro

teacher•

Que grande! Es el primer profesor que avisa cuando va a explicar una pregunta del examen 😂 😂 😂!!

GENIAAAAL!

Fernando Ontiveros

student•

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 👏🏻

William Velázquez

student•

Exacto, todo lo explica con gran claridad! 😄

Diego Fernando Berrio Meza

student•

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.

Luis Diaz Venero

student•

estaria bueno para React y todos los de Js tambien :)

Leandro Videla

student•

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>

Sergio Toshio Minei

student•

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:

Client Side Rendering.
Carga sólo lo que falta de esa página.
Cambia la ruta en el browser.

Si abrimos un nuebo tab:

Server Side Rendering.
Carga todo el HTML, CSS y JS.
Crea una nueva sesión.

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í.

Julio Hurtado

student•

Una consulta más bien off topic.

¿que complemente tienes instalado para que funcione emmet en JSX con vcode?

Roberto Gonzalez

teacher•

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.

Kevin Morales

student•

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.

Fernando Azuaje

student•

ya no es necesario agregar prefetch a Link, Next lo hace por si solo cuando lo corren en modo produccion

Jhon Manuel Angulo Moncada

student•

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}

Diego Ortiz

student•

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?

Carlos Raez

student•

Que bueno... y para utilizar Rutas privadas.... es decir con login.... y luego entras a la App??? Muchas gracias

Luis Diaz Venero

student•

Hola, como lo resolviste?

Daniel Esteves

student•

¡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

Camilo Rivera Quintero

student•

Buen Profe!

Daniel Muñoz Martín

student•

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 !

Jaime David Burbano Montoya

student•

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

Diego Ortiz

student•

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

José Antonio aparicio gallego

student•

prefetch pregunta de examen Prehistórico

Carlos Hernandez

student•

Cuando intento navegar a un channel, me aparece lo siguiente: ++An unexpected error has occurred.++

Alguien me puede ayudar? Por favor

Diego Ortiz

student•

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...

Enmanuel castillo

student•

General algún inconveniente el que los archivos sean de extensión .jsx en vez de .js???

Gabriel De Andrade

student•

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

Enmanuel castillo

student•

General algún inconveniente el que los archivos sean de extensión .jsx en vez de .js???

Joaquin Araujo

student•

He notado que al regresar al index desde channel tarda un poco en renderizarlo ¿le pasa a alguien más?

Job Abdala Coronado Duran

student•

Jesus Garcia

student•

excelente explicacion del prefetch

David Daniel Castillo Nava

student•

Excelente como explica, todo detallado. De momento me esta gustando el Next.Js.

Utilizando el componente Link

Introducción a Next.JS

¿Dónde aprender Next.js actualizado?

¿Qué es Next.JS?

Creando nuestra primera página

Styled JSX

Server Side Rendering

Aprende qué es Server Side Rendering

Intro a getInitialProps

Utilizando el componente Link

Recibiendo Parámetros

Performance de Get Initial Props

Vista de Podcasts

Componentes Reutilizables

Creando componentes en React

Reorganizar la vista de podcasts

Navegación Avanzada

Gestionando Errores

Personalizando errores

¿Cómo diseñar URLs?

Configurando Next Routes

Implementando Next Routes

Vistas Híbridas

Implementar el Modal

Agregando un loader

Publicando nuestra app

Mejores prácticas en Github

Publicar la app con now

Conclusiones del curso