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

Implementando Next Routes

17/23
Recursos

Siguiendo con la clase pasada, vamos a empezar a implementar Next Routes dentro del resto de nuestra aplicación. Así todos los links internos siguen esta nueva estructura de URLs que estuvimos diseñando.

Aportes 9

Preguntas 1

Ordenar por:

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

Así lo pueden agregan PodcastList

<Link route="podcast"
    params={{
            slugChannel: slug(podcast.channel.title),
            idChannel: podcast.channel.id,
            slug: slug(podcast.title),
            id: podcast.id
    }}
    prefetch key={podcast.id}>
    <a className="podcast">
        <h3>{podcast.title}</h3>
    </a>
</Link>               	

Y no olviden que en el botón de “volver” de la página podcast también debemos agregarlo 😃

<Link route="channel"
    params={{
        slug: slug(clip.channel.title),
        id: clip.channel.id
    }}
>
    <a className='close'>&lt; Volver</a>
</Link>

Un pequeño aporte para los que quieran usar las rutas dinámicas de Next.js, esta sería la estructura de directorio:

[slug]/[idc]/index.js --> página principal del canal
[slug]/[idc]/[podcast]/[idp].js --> página principal del podcast
el parámetro [idc] e [idp] del objeto query se usan como id del canal e id del podcast respectivamente.

Código de ChannelGrid.js:

<Link
  key={`${channel.id}-${index}`}
  href={`/${slug(channel.title)}/${channel.id}`}
>
  <a className='channel'>
    <img src={channel.urls.logo_image.original} alt={channel.title} />
    <h2>{channel.title}</h2>
  </a>
</Link>```

Código de PodcastList.js:

<Link
key={podcast.id}
href={/${slug(podcast.channel.title)}/${podcast.channel.id}/${slug( podcast.title, )}/${podcast.id}}

<a className=‘podcast’>
<h3>{podcast.title}</h3>
<div className=‘meta’>{Math.ceil(podcast.duration / 60)} minutes</div>
</a>
</Link>;


Código del slug sin librería:

const slug = (name = ‘’) =>
name
.toLocaleLowerCase()
.replace(/\s/g, ‘-’)
.normalize(‘NFD’)
.replace(/[\u0300-\u036f]/g, ‘’);


Mi repo: https://github.com/elvisss/podcasts-next

Saludos.

Por qué no utilizar código nativo en ves de una librería, ya que el código puede quedar de la siguiente manera.

const slug = (name = "") => name.toLocaleLowerCase().replace(/\s/g, "-");

Siempre e considerado que si se puede resolver de manera muy sencilla alguna tarea por que utilizar una libreria.

Esto esta muy bueno.

Tengo una duda. ¿Cómo podría hacer que los buscadores indexen mis URL’s dinámicas generadas desde la API en Next Routes?

Precioso video. Increible. Que buen curso 😄

Consulta, Si Next Routes no es de mi agrado, que otra alternativa podría tomar? o simplemente podría quedarme con las rutas que me entrega por default Next con Link?

¿Alguien sabe si hay una manera de ocultar el número del id por completo en la URL?

completamente practico y magnifico