Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

Rutas dinámicas

5/27
Recursos

Aportes 42

Preguntas 9

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Aqui hay mas documentación y ejemplos de este tipo de ruteo https://nextjs.org/docs/routing/dynamic-routes

Por el momento estoy asombrado de lo no dañino que es el vscode con theme claro 😁

Para los que quieren saber como podemos usar más de un parámetro, recuerden que el router está basado en el file system, por lo que si queremos más parámetros nuestro sistema de archivos en pages lucirá de la siguiente manera para este ejemplo:
Ruta ejemplo: /users/[id]/edit/[idPost]

File system en pages para la ruta ejemplo

- pages
- - users
- - - [id]
- - - - edit
- - - - - [idPost].js

Dentro de [idPost].js ya podemos obtener el query param o incluso los query que enviemos en la url, sea /users/23/edit/32?title=new title

let {query: {id, idPost, title}} = useRouter()

Por ahora mi duda es cómo manejar más de un parámetro ‘productId/productColor’ y las queries ‘?value=2&color=blue’.

Es bueno tener en cuenta que no es necesario hacer el “import React…” con Next porque ya nos lo proporciona, asi nos ahorramos escribir siempre esa línea

woow!! hermoso nextjs !!

¿Cómo hacer rutas dinámicas más complejas?

/
Seguramente después de ver esta clase os estaréis preguntando…
/
¿Cómo diablos puedo crear el código para una ruta dinámica más compleja?, NO ME ENSEÑARON ESO
/

/
Una ruta dinámica tal como:
/
localhost:3000/producto/123/comentarios/123
/
Pues yo también, y creo que he encontrado la solución 😎
/
Recordemos por un momento esta clase, lo que hicimos es que creamos una carpeta llamada products y dentro de esa misma carpeta añadimos un archivo llamado [productId].js
/

/
Esto lo hicimos para ser capaces de obtener una ruta url como:
/
localhost:3000/product/123
/
Sin embargo, muchas veces eso no es suficiente para hacer una pagina web, o específicamente, una aplicación web, entonces, lo que debemos de hacer para conseguir una ruta como:
/
localhost:3000/product/123/comments/123
/
Entonces, lo que tenemos que hacer es:
/

  1. Conservar a la carpeta products y borrar el archivo [productId]. js
    /

    /
  2. En lugar del archivo borrado, crear un nuevo archivo llamado index.js
    /

    /
    (El contenido que este dentro de ese mismo archivo será el contenido que se visualizara cuando busquemos la url: localhost:3000/producto)
    /
  3. Crear una carpeta llamada [productId]
    /

    /
  4. Dentro de esa carpeta antes mencionada, tenemos que añadir un archivo llamado index. js
    /

    /
    (El contenido que este dentro ese archivo será el contenido que se visualizara cuando busquemos la url: localhost:3000/product/‘el id de algún producto’).
    /
  5. Dentro de la carpeta products, también hay que añadir una carpeta llamada comments también, entonces dentro de la misma carpeta, tenemos que añadir un archivo index. js
    /

    /
    (El contenido que este dentro de ese mismo archivo será el contenido que visualizaremos cuando busquemos de la url localhost:3000/producto/‘el id de algún producto’/comentarios).
    /
  6. Dentro de la misma carpeta, añadir un archivo [commentId].js
    /

    /
    (El contenido que este dentro de ese mismo archivo será el contenido que visualizaremos cuando busquemos de la url localhost:3000/producto/‘el id de algún producto’/comentarios/‘el id de algún comentario’).
    /

Importante: Cabe recalcar que aparte de tener acceso al id de un determinado comentario, también podremos acceder a el id de un determinado producto desde el archivo [comment].jsx
/
Solo hace falta hacer algo como:
/

import React from "react";
import { useRouter } from "next/router";

const Comment = () => {

    const router = useRouter()
    const { productId, commentId } = router.query

    return (
        <div>El comentario { productId } de el producto { commentId }</div>
    )
}

export default Comment;

/
De esta manera obtendremos rutas de url más profesionales, y si queremos hacer rutas dinamicas aun mas complejas, como:
/
localhost:3000/product/123/comments/123/likes/123
/
Debemos de seguir la misma metodología aplicada.
/
Espero haberlos podido ayudar a hacerlo [email protected] 😀.

Yo trabajo con NextJs pero esta nueva forma de obtener los queryParams no la conocía.

las rutas dinámicas son magia pura, su base en file system genera buena experiencia de usuario para el desarrollador

Rutas dinámicas

Solamente con escribir [nombreDeVariable].js ya tenemos una ruta dinámica.

Por ejemplo, para crear la ruta ‘/product/algo’, creamos dentro de pages la carpeta ‘product’ y dentro de ella, un archivo [id].js:

import React from 'react'
import { useRouter } from 'next/router'

const ProductItem = () => {
  const router = useRouter()
  return (
    <div>
      Esta es la página del producto: {router.query.id}
      {/* Esto funciona porque el archivo tiene 'id' dentro de los '[]' */}
    </div>
  )
}

export default ProductItem

Páginas con Rutas Dinámicas

También podemos utilizar rutas dinámicas si agregamos corchetes al nombre del archivo [].js. Por ejemplo, si creamos un archivo llamado pages/product/[id].js podremos acceder a el en las rutas product/1product/2, y así sucesivamente.

import { useRouter } from "next/router";

const ProductItem = () => {

  const router = useRouter();

  const { id } = router.query; // El id reprecenta el nombre con el que llame a mi archivo

  // return <div>La pagina del producto: {router.query.id}</div>;
  return <div>La pagina del producto: {id}</div>;

}

export default ProductItem;

Como puedes observar, en el código anterior utilizamos el hook useRouter de Next.js para acceder al objeto router, dicho objeto contiene propiedades muy útiles, las partes dinámicas de cada ruta se almacenan en router.query.

super claro, nada que temer, vamos con todo.

Este curso es buenísimo, por ahora Next.js se esta ganando todo mi amor

https://morioh.com/p/ffa2b805978c
dejo este articulo que explica como funciona actualmente el enrutamiento de Next.js

Las rutas que maneja nextjs no son query params como se dice en el minuto 4:14. Este tipo de rutas se conocen como path params y se usan para identificar recursos en la web.

Si quieren saber mas sobre este tema, lo cual recomiendo mucho, acá les dejo este link https://stackoverflow.com/questions/30967822/when-do-i-use-path-params-vs-query-params-in-a-restful-api

Viva next.js adios expressjs

El archivo se llamaría [parametro1, parametro2].js ?
En caso de que necesite pasar 2 parámetros

Super. se pueden pasar querrystring por la url.

como paso más de un parámetro por url?

Gatsby es muy similar en las rutas estaticas a nextjs, en cuanto a las dinamicas, Gatsby es un poco mas complejo en comparación a nextjs que es super sencillo,.

Me encanto!!!

si tenemos la siguiente url, con el siguiente query

http://localhost:3000/product/adasd?value=34

podemos acceder a los valores a traves del query de la siguiente mandera

import React from 'react';
import { useRouter } from 'next/router';

const ProductItem = () => {
  const router = useRouter();
  const { productid, value } = router.query;
  console.log(router.query) //Con este log puede ver el objeto y sus propiedades 
  return (
    <div>Esta es la pagina del producto { productid } { value }</div>
  )
}

export default ProductItem;

como pueden ver router.query nos devulve un objeto con todas las propiedades que le sean pasadas mediante la url

Las rutas dinámicas se les puede poner el detalle con un archivo [variable].js. Pero si por ejemplo, en este caso nosotros entramos a la url “/product” sin ningún tipo de detalle, también podemos agregar un archivo raíz en caso de que no haya detalle en product/index.js

a la fecha de este comentario no hay ningún cambio en el código que presento el profesor con el actual React y Next se puede seguir tranquilo, si al momento de mirar la paginas dinamicas solo recarga manualmente la pagina con un F5 y listo

Me gusta este curso, me pregunto si dentro de las paginas estáticas puedo utilizar frameworks como bootstrap

Si desean tener mas informacion aqui les dejo el link de la documentacion https://nextjs.org/docs/routing/dynamic-routes

Excelente clase que facilidad con la que se puede generar las rutas de las paginas

Excelso, esto ya se está pareciendo más a un framework completo.

se entendió perfectamente, 😃

¡Vengo del curso de sitios estáticos de Jamstack y ya había tomado este curso, pero tuve que volver a regresar porque me quede trabado en la clase 11, así que también aquí me tienen apoyándome de la documentación de next, y repasando conceptos, pero creo que así es el camino de los desarrolladores!

Qué hermoso es nexT!

Con react-router-dom tenemos url o route params y query params.
Para obtener los route params hacemos algo como lo siguiente let { id } = useParams(); y para obtener los query params hacemos let query = useQuery();. Por lo tanto hacemos uso de dos hooks distintos para obtener los params.


En cambio en Next pone los route y query params en el mismo query object que obtenemos haciendo const { query } = useRouter().


Al hacerlo de esta forma podemos tener algunos conflictos con los nombres, por ejemplo si tenemos la siguiente pagina pages/posts/[pid].js y navegamos a /post/abc?pid=123 tenemos una variable con el mismo nombre en los route params y query params. En estos casos se toma el valor de la url param ( abc ), teniendo un objeto query igual a { “pid”: “abc” }

pero de esta forma la pagina hace refresh o me equivoco

Buena, Jonathan! NextJS está on fire.

Excelente forma de explicar y me gusta mucho que realmente no se detenga a explicar cosas que no son de Next.js. que crack 🙌🏽

es hermoso y un poco mas facilpor ahora xD

useRouter es un paquete muy bueno la verdad y el next/head tambien . A darle familia!

Cada vez me sorprende mas Next 💚

La verdad es que estoy muy contento, siento que estoy entendiendo lo explicado hasta ahora, el profesor es bastante claro y específico al momento de enseñar.

Es magia, sobre todo es intuible y se me ocurren mil maneras de usar estas bondades

Woow! Increible!

hola, como se puede hacer una ruta dinamica con dos parametros?