Configurando Next Routes

Clase 16 de 23 • Curso de Next.js 2018

Cesar Merlo

student•

Me pase a aprender next desde su web ya que este curso quedo muy desactualizado y varias cosas cambiaron.. como el manejo de las rutas x ej... ojala saquen un curso actualizado de NEXT!! https://nextjs.org/learn/basics/create-dynamic-pages/use-router

Jorge Méndez Ortega

student•

pero clara mente dicen que el router de next queda corto ya que incialmente next esta pensado para sitios estáticos, lo que en mi caso me a funcionado para manejar rutas de manera dinámica es express o el paquete de http de node lo e probado en un desarrollo y me esta dando buenos resultados ya que las peticiones a API's me funciona muy bien generarlas de manera asincrona desde el router ya que tengo entendido que como buena practica no es muy recomendable hacerlo en getInitialProps

Juan Otavalo

student•

Por que no es recomendable usar getInitialProps? no se supone que esa función fue creada por asi decirlo para eso. Puede dar malos tiempos de carga en la página o por seguridad?

Sergio Toshio Minei

student•

Next Routes

Next Routes permite asignar un nombre a una url con Next.

Con Next Routes, el router de Next por defecto no sirve.

$ npm install next-routes --save

Para usar Next Routes, se debe de configurar server.js.

const next = require('next')
const routes = require('./routes')
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handler = routes.getRequestHandler(app)
const port = process.env.PORT || 3000;

const { createServer } = require('http')
app.prepare().then(() => {
  createServer(handler).listen(port)
})

Para definir las rutas, se hace con un archivo routes.js.

const routes = require('next-routes')

// .add(nombre, url, archivo.js)      
module.exports = routes()        
  .add('index')
  .add('channel', '/:slug.:id', 'channel')
  .add('podcast', '/:slugChannel.:id/:slung.:id', 'podcast')

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

Wilson Romero

student•

Gracias por el resumen

Claudio Aldo Antonio Herrera Contreras

student•

GENIAL GRACIAS!!!!

Sergio Alejandro Trejo Cuxim

student•

Ya es más sencillo implementar rutas dinámicas de manera oficial por parte de Next.js, esto a partir de la versión 9

David Behar

student•

¿Qué ha cambiado desde la versión 9?

Sergio Alejandro Trejo Cuxim

student•

Consúltalo tu mismo, si lees la documentación te darás cuenta. La librería de Next Routes te indica que ya no lo emplees y uses la implementación oficial en su lugar.

Luis Daniel Becerra Avellaneda

student•

Next-Routes

Ignacio Castillejo Gómez

student•

A dia de hoy Next permite hacer el enrutado de manera mucho mas sencilla y nativa

Jhurgen Maraza

student•

Alguien me puede dar una mano? Corro el comando npm run dev y se queda colgado en 'node server.js' y no pasa de eso hice todo lo de la clase, me fije archivo por archivo y lo tengo igual, es mas hasta me descargue los js de la parte de recursos e igual no me funcionan, me fije en el package.json y lo tengo igual. Alguien tendria una idea cual seria el error? si tengo que instalar algo de node?

Fernanda Aragon

student•

Hola, comúnmente estos errores se deben a Node.js, puedes desinstalar Node.js e instalarlo otra vez, puedes instalar la versión LTS que es la más estable...

Jhurgen Maraza

student•

Volví a instalar Node y sigue igual. Se queda en

Node Server.js

Ayuda! volvi a hacer todos los pasos, a instalar cada una de las dependecias

Jorge Méndez Ortega

student•

Al utilizar next-router tendríamos el mismo poder que facilita express?, algo como

Generar middleware
Url con parametros algo como esto /users/:userId/books/:bookId
Hacer que un router conteste un JSON

Ya que estoy suponiendo que la librería next-router tiene el mismo poder que los routers de express.

Eduardo Rasgado Ruiz

student•

Si no comprendes como funciona la sintaxis para las rutas con :slug.id, etc. No desesperes, sigue la clase hasta el final y comprenderás 😃

Kembert Isaac Nieves Briceño

student•

Hola! tengo una duda, como estoy acostumbrado a trabajar de esta manera, al principio de curso configure para tener mis carpetas de "pages" y "component" dentro de otra llamada "src", ahora parece que next-router no trabaja con esto, que podría hacer?

jose ortiz

student•

next routes remplaza a react router?

Eduardo Luis Gonzalez Raveli

student•

No exactamente, las funciones internas de next, con su capeta /pages remplaza a react-router

Fernando Azuaje

student•

Con la propiedad 'as' de Link tambien se pueden hacer mas sencillas de leer las rutas. un ejemplo con los canales:

<Link href={`/channel?id=${ channel.id }`} as={`/${channel.title}.${channel.id}`}>
          <a className='channel'>
            <img src={ channel.urls.logo_image.original } alt="" />
            <h2>{ channel.title }</h2>
          </a>
        </Link>```

Mario Alejandro Crespo Reyes

student•

Al día de hoy:

import { useRouter } from 'next/router'

Kevin Kleber Rivamontan Alvarado

student•

// server.js
const next = require('next')
const routes = require('./routes')
const app = next({dev: process.env.NODE_ENV !== 'production'})
const handler = routes.getRequestHandler(app)

// With express
const express = require('express')
app.prepare().then(() => {
  express().use(handler).listen(3000)
})

// Without express
const {createServer} = require('http')
app.prepare().then(() => {
  createServer(handler).listen(3000)
})```

Kevin Kleber Rivamontan Alvarado

student•

const routes = require('next-routes')

                                
module.exports = routes()                           
.add('about')                                      
.add('blog', '/blog/:slug')                         
.add('user', '/user/:id', 'profile')                
.add('/:noname/:lang(en|es)/:wow+', 'complex')      
.add({name: 'beta', pattern: '/v3', page: 'v3'})    ```

Kevin Kleber Rivamontan Alvarado

student•

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }```

Daniel Elver Valderrama Mejia

student•

Buenas Team ! TENGO UN ERROR This is probably not a problem with npm. There is likely additional logging output above. Me hace referencia en serve.js

Si me pueden ayudar Gracias

silvana murgo

student•

El profe excelente pero el contenido esta muy desactualizado creo que pierde un poco al estudiante. Siempre uno espera al principio el camino feliz aprender los conceptos y luego si jugar y investigar, resolver

silvana murgo

student•

Como ya saben esto ya se pude realizar de manera nativa con nextJS les dejo el repo de @Elvis que en el siguiente video explica como implementar las url dinamicas

Daniel Elver Valderrama Mejia

student•

Geordano Polanco Rodríguez

student•

Pero esto sólo es necesario si quieres utilizar Server side rendering?

const next = require('next')
const routes = require('./routes')
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handler = routes.getRequestHandler(app)
const port = process.env.PORT || 3000;

const { createServer } = require('http')
app.prepare().then(() => {
  createServer(handler).listen(port)
})

const routes = require('next-routes')

// .add(nombre, url, archivo.js)      
module.exports = routes()        
  .add('index')
  .add('channel', '/:slug.:id', 'channel')
  .add('podcast', '/:slugChannel.:id/:slung.:id', 'podcast')

<Link href={`/channel?id=${ channel.id }`} as={`/${channel.title}.${channel.id}`}>
          <a className='channel'>
            <img src={ channel.urls.logo_image.original } alt="" />
            <h2>{ channel.title }</h2>
          </a>
        </Link>```

// server.js
const next = require('next')
const routes = require('./routes')
const app = next({dev: process.env.NODE_ENV !== 'production'})
const handler = routes.getRequestHandler(app)

// With express
const express = require('express')
app.prepare().then(() => {
  express().use(handler).listen(3000)
})

// Without express
const {createServer} = require('http')
app.prepare().then(() => {
  createServer(handler).listen(3000)
})```

const routes = require('next-routes')

                                
module.exports = routes()                           
.add('about')                                      
.add('blog', '/blog/:slug')                         
.add('user', '/user/:id', 'profile')                
.add('/:noname/:lang(en|es)/:wow+', 'complex')      
.add({name: 'beta', pattern: '/v3', page: 'v3'})    ```

Configurando 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