Implementando Next Routes

Clase 17 de 23 • Curso de Next.js 2018

Resumen

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.

Joaquin Araujo

student•

Aqui tienes el regex replace(/[^\w\-]+/g, '') 😉

Leonardo Rivero

student•

Gracias me ahorraste tiempo

Julio Hurtado

student•

Para la lista de podcast en channel, esto sirve:

params={{
                slugChannel: slug(clip.channel.title), 
                idChannel: clip.channel.id,
                slug: slug(clip.title), 
                id: clip.id,
              }}

Efrén Sánchez

student•

Y el routes.js :

.add('index')
  .add('channel', '/:slug.:id', 'channel')
  .add('podcast', '/:slugChannel.:idChannel/:slug.:id', 'podcast')

Luis Lira

student•

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>

Elvis Saavedra

student•

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.

Daniel Valderrama Mendoza

student•

En hora buena!, en la anterior clase había quedado perdido sobre su uso, ahora ya entiendo la funcionalidad que incorpora Next.js. Gracias

Sergio Toshio Minei

student•

Enlazando páginas con Next Routes

Next Routes usa otro tipo de componente <Link> para enlazar página.

import {Link} from '../routes';

<Link route='channel' params={{ 
  slug: slug(channel.title), 
  id: channel.id }}>
  <a>Enlace</a>
</Link>

route: es el nombre del enlace definido en routes.js
params: son los parámetros definidos en routes.js. Nótese las doble {{}}.

Encode de textos para urls

Para transformar un texto en un formato que sea compatible con las urls, por ejemplo, para transformar un título, se va a usar una librería llamada slugify.

$ npm install slugify

Luego, para usarlo, se puede realizar de la siguiente manera:

import slugify from 'slugify';

export default function slug(name) {
  return slugify(name, { lower: true }).replace(/[^\w\-]+/g, '')
}

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Edgar de Jesus Mendoza Ortegon

student•

Gracias por el aporte

leonardo Oteca

student•

Wooow me quito el sombrero con tu resumen del curso!! Saludos Crack 🙌🏽

Jorge Méndez Ortega

student•

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.

Geordano Polanco Rodríguez

student•

Me parece que lo ha realizado con una librería externa, para resolver un posible problema con la internacionalización.

Tu código puede que te funcione, pero si pretende internacionalizar la aplicación, puede que te encuentres con problemas.

yafte roberto muñoz lujano

student•

Esto esta muy bueno.

Michel Roberto Traña Tablada

student•

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

Manuel Corrales

student•

Al igual que indexan URL dinámicas de PHP u otros servicios, si tienes enlaces desde el index que apunten a ellos y autoridad se indexaran. Recuerda que deben tener contenido único y de calidad para acelerar este proceso.

Michel Roberto Traña Tablada

student•

@manuel-corrales gracias por responder amigo.

¿Qué pasa cuando tienes miles de URL dinámicas generadas y no todas pueden estar en el Index?

Por ejemplo: “El Blog de Platzi no contiene todas sus URL’s dinámicas en el Index, pero aún así las publicaciones aparecen en los buscadores”

Eduardo Hidalgo Díaz Rugama

student•

Precioso video. Increible. Que buen curso 😄

Platzi Team

student•

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?

Fernanda Aragon

student•

Hola, no creo que sea posible, con ese router trabaja el framework para poder hacer el Server Side Rendering, es como el @angular/router de Angular, con esto trabaja el framework para que todo esté unificado y legible.

Pilar Camargo Márquez

student•

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

Jorge Luis Garnica Blanco

student•

Te recomiendo que si no se puede hacer y eres fullstack, en tu tabla en la BD, además de crear los productos(o podcasts), le coloques un código único a cada registro además del primary key, de éste modo, inclusive evitarás crear links de esa forma. Saludos

Alejandro Robleto

student•

completamente practico y magnifico

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

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

Implementando Next Routes

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