No tienes acceso a esta clase

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

Curso de Next.js 2018

Curso de Next.js 2018

Roberto González

Roberto González

Utilizando el componente Link

7/23
Recursos

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.

Aportes 12

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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>

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}

Buen Profe!

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

<Link href="/channel" prefetch></Link>

  • prefetch No carga getInitialProps, sólo el payload

  • prefetch Solo funciona en producción, no funciona en modo dev. ( npm run build && npm start)

  • prefetch Es una forma de acelerar el precargado del render

import fetch from 'isomorphic-fetch'
import Link from 'next/link'

export default class extends React.Component {

    // getInitialProps() es una función que solo se puede ejecutar en Next.js 
    
    static async getInitialProps(){
        
        // Llamo al API de audioboom y obtengo la los caneles recomendados 
        let req = await fetch
        ('https://api.audioboom.com/channels/recommended')

        //  obtengo todo lo que contiene "body": [] y lo asigno a una variable llamada channels
        let { body: channels } = await req.json()

        // Regreso los todos los channels
        console.log(channels)
        return { channels }
    }

    render(){
        const { channels } = this.props

        return <div>
            <header>Podcasts</header>

            <div className="channels">
            {
                channels.map((channel) => (
                    <Link href="/channel">
                    <a className="channel" prefetch>
                    <img src={ channel.urls.logo_image.original } alt="" />
                    <h2>{ channel.title }</h2>
                    </a>
                    </Link>
                ))
            }
            </div>
            
            <style jsx>{`
            header {
                color: #fff;
                background: #8756ca;
                padding: 15px;
                text-align: center;
            }
            .channels {
                display: grid;
                grid-gap: 15px;
                padding: 15px;
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            .channel {
                display: block;
                border-radius: 3px;
                margin-bottom: 0.5em;
                color: #333;
                text-decoration: none;
                text-align: center;
            }
            .channel img {
                width: 100%;
                border-radius: 3px;
                box-shadow: 0px 2px 6px rgba(0,0,0,0,.15);
                width: 100px;
            }
            h2 {
                padding: 5px;
                font-size: 0.9em;
                font-weight: 600;
                maring: 0;
                text-align: center;
            }
           
            `}</style>

            <style jsx global>{`
            body {
                margin: 0;
                font-family: system-ui
                background: white;
            }
            `}</style>

        </div>
    }
}

que interesante se está poniendo esto!! después de ver react y redux, este curso le da el toque para terminar de fascinarte ❤️

<h1>Importante</h1>

Recordar que si la página se llama: “/channel” el componente debe llamarse en pages de igual manera osea: channel.js

Para poder utilizar el componente Link deberemos importar la librería next/link, y así poder desplazarnos por nuestras vistas de forma dinámica y rápida sin necesidad de recargar nuestro navegador, ademas, nos ofrece el Prefetch, que nos sirve para pre-cargar un archivo Js antes de entrar en él.