CursosEmpresasBlogLiveConfPrecios

Configurando Next Routes

Clase 16 de 23 • Curso de Next.js 2018

Clase anteriorSiguiente clase

Contenido del curso

Introducción a Next.JS
  • 1

    ¿Dónde aprender Next.js actualizado?

    00:14
  • 2
    ¿Qué es Next.JS?

    ¿Qué es Next.JS?

    01:41
  • 3
    Creando nuestra primera página

    Creando nuestra primera página

    07:44
  • 4
    Styled JSX

    Styled JSX

    09:54
Server Side Rendering
  • 5
    Aprende qué es Server Side Rendering

    Aprende qué es Server Side Rendering

    04:15
  • 6
    Intro a getInitialProps

    Intro a getInitialProps

    14:44
  • 7
    Utilizando el componente Link

    Utilizando el componente Link

    08:01
  • 8
    Recibiendo Parámetros

    Recibiendo Parámetros

    13:20
  • 9
    Performance de Get Initial Props

    Performance de Get Initial Props

    04:39
  • 10
    Vista de Podcasts

    Vista de Podcasts

    02:07
Componentes Reutilizables
  • 11
    Creando componentes en React

    Creando componentes en React

    15:16
  • 12
    Reorganizar la vista de podcasts

    Reorganizar la vista de podcasts

    03:03
Navegación Avanzada
  • 13
    Gestionando Errores

    Gestionando Errores

    14:06
  • 14
    Personalizando errores

    Personalizando errores

    10:21
  • 15
    ¿Cómo diseñar URLs?

    ¿Cómo diseñar URLs?

    03:34
  • 16
    Configurando Next Routes

    Configurando Next Routes

    11:26
  • 17
    Implementando Next Routes

    Implementando Next Routes

    08:04
  • 18
    Vistas Híbridas

    Vistas Híbridas

    12:56
  • 19
    Implementar el Modal

    Implementar el Modal

    06:24
  • 20
    Agregando un loader

    Agregando un loader

    03:44
Publicando nuestra app
  • 21
    Mejores prácticas en Github

    Mejores prácticas en Github

    04:33
  • 22
    Publicar la app con now

    Publicar la app con now

    02:39
  • 23
    Conclusiones del curso

    Conclusiones del curso

    01:07
    Cesar Merlo

    Cesar Merlo

    student•
    hace 6 años

    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

      Jorge Méndez Ortega

      student•
      hace 6 años

      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

      Juan Otavalo

      student•
      hace 5 años

      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

    Sergio Toshio Minei

    student•
    hace 7 años

    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

      Wilson Romero

      student•
      hace 7 años

      Gracias por el resumen

      Claudio Aldo Antonio Herrera Contreras

      Claudio Aldo Antonio Herrera Contreras

      student•
      hace 6 años

      GENIAL GRACIAS!!!!

    Sergio Alejandro Trejo Cuxim

    Sergio Alejandro Trejo Cuxim

    student•
    hace 6 años

    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

      David Behar

      student•
      hace 6 años

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

      Sergio Alejandro Trejo Cuxim

      Sergio Alejandro Trejo Cuxim

      student•
      hace 6 años

      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

    Luis Daniel Becerra Avellaneda

    student•
    hace 7 años

    Next-Routes

    Ignacio Castillejo Gómez

    Ignacio Castillejo Gómez

    student•
    hace 6 años

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

    Jhurgen Maraza

    Jhurgen Maraza

    student•
    hace 7 años

    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

      Fernanda Aragon

      student•
      hace 7 años

      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

      Jhurgen Maraza

      student•
      hace 7 años

      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

    Jorge Méndez Ortega

    student•
    hace 6 años

    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

    Eduardo Rasgado Ruiz

    student•
    hace 7 años

    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

    Kembert Isaac Nieves Briceño

    student•
    hace 7 años

    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

    jose ortiz

    student•
    hace 7 años

    next routes remplaza a react router?

      Eduardo Luis Gonzalez Raveli

      Eduardo Luis Gonzalez Raveli

      student•
      hace 6 años

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

    Fernando Azuaje

    Fernando Azuaje

    student•
    hace 6 años

    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

    Mario Alejandro Crespo Reyes

    student•
    hace 6 años

    Al día de hoy:

    import { useRouter } from 'next/router'

    Kevin Kleber Rivamontan Alvarado

    Kevin Kleber Rivamontan Alvarado

    student•
    hace 7 años
    // 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

    Kevin Kleber Rivamontan Alvarado

    student•
    hace 7 años
    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

    Kevin Kleber Rivamontan Alvarado

    student•
    hace 7 años
    "scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js" }```
    Daniel Elver Valderrama Mejia

    Daniel Elver Valderrama Mejia

    student•
    hace 6 años

    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

    silvana murgo

    student•
    hace 5 años

    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

    silvana murgo

    student•
    hace 5 años

    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

    https://github.com/elvisss/podcasts-next/tree/master/pages

    Daniel Elver Valderrama Mejia

    Daniel Elver Valderrama Mejia

    student•
    hace 6 años
    Captura.PNG
    Geordano Polanco Rodríguez

    Geordano Polanco Rodríguez

    student•
    hace 6 años

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

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads