Configurando Next Routes
Clase 16 de 23 • Curso de Next.js 2018
Contenido del curso
Cesar Merlo
student•
hace 6 años
Jorge Méndez Ortega
student•
hace 6 años
Juan Otavalo
student•
hace 5 años
Cesar Merlo
Jorge Méndez Ortega
Juan Otavalo
Sergio Toshio Minei
Wilson Romero
Claudio Aldo Antonio Herrera Contreras
Sergio Alejandro Trejo Cuxim
David Behar
Sergio Alejandro Trejo Cuxim
Luis Daniel Becerra Avellaneda
Ignacio Castillejo Gómez
Jhurgen Maraza
Fernanda Aragon
Jhurgen Maraza
Jorge Méndez Ortega
Eduardo Rasgado Ruiz
Kembert Isaac Nieves Briceño
jose ortiz
Eduardo Luis Gonzalez Raveli
Fernando Azuaje
Mario Alejandro Crespo Reyes
Kevin Kleber Rivamontan Alvarado
Kevin Kleber Rivamontan Alvarado
Kevin Kleber Rivamontan Alvarado
Daniel Elver Valderrama Mejia
silvana murgo
silvana murgo
Daniel Elver Valderrama Mejia
Geordano Polanco Rodríguez
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
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
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?
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í.
Gracias por el resumen
GENIAL GRACIAS!!!!
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
¿Qué ha cambiado desde la versión 9?
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.
Next-Routes
A dia de hoy Next permite hacer el enrutado de manera mucho mas sencilla y nativa
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?
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...
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
Al utilizar next-router tendríamos el mismo poder que facilita express?, algo como
/users/:userId/books/:bookIdYa que estoy suponiendo que la librería next-router tiene el mismo poder que los routers de express.
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 😃
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?
next routes remplaza a react router?
No exactamente, las funciones internas de next, con su capeta /pages remplaza a react-router
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>```
Al día de hoy:
import { useRouter } from 'next/router'
// 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'}) ```
"scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js" }```
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
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
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
Pero esto sólo es necesario si quieres utilizar Server side rendering?