Tengo el siguiente problema en Next.js. Estoy construyendo un tablero. Esta sería algo la ruta raíz:
/dashboard/Aquí puede seleccionar entre diferentes Tiendas para llegar al Dashboard de las diferentes tiendas. Ahora, cuando hago clic en una de las tiendas, esta es mi ruta:
/dashboard/store/%STORE_ID%/ %STORE_ID% es algo así como 3iHnkdnfkD y lo necesito para comunicarme con mi servidor. Básicamente, uso la ID como una de las claves de mi base de datos y no la obtengo de la ruta al hacer clic en una página. Ahora, la ruta continúa... Digamos que tengo diferentes productos y cada uno de ellos tiene una identificación nuevamente:
/dashboard/store/%STORE_ID%/product/%PRODUCT_ID% Al navegar entre estos productos individuales, el %PRODUCT_ID% cambia obviamente y con él la ruta. Entonces, tengo esta ruta: /dashboard/store/3iHnkdnfkD como ejemplo; La página ahora consistiría en una tabla donde puedo hacer clic en los productos para obtener una página detallada. Así que usaría un NextLink y cuando hago clic en uno de los productos obtengo su id para incluirlo en la ruta:
<NextLink href={`/dashboard/store/%STORE_ID%/product/${id}`}> <MyUnrelevantButton /> </NextLink> Ahora, aquí está mi problema: necesito saber el STORE_ID% para navegar al producto, ya que de lo contrario, perdería la referencia de la tienda. Sé que podría recuperar el STORE_ID% de la ruta y simplemente pasarlo nuevamente, pero esto es redundante y con más de unos pocos NextLinks bastante trabajo. ¿Hay alguna forma de saberlo? Siguiente: use la ruta que conozco correctamente y simplemente agregue /product/%PRODUCT_ID% a ella
Esto se denomina enrutamiento dinámico en Next.js. Deberá consultar este ejemplo sobre cómo lograrlo.
El repositorio de ejemplo de Next.js como un montón de ejemplos de CÓMO HACERLO comunes