He visto esta pregunta en línea. Estoy tratando de implementar la solución sugerida, pero aún no me funciona. Así que mis disculpas por el duplicado.
De todos modos, tengo una etiqueta de enlace simple que arroja un 404
<Link className={classes.navbarDesktopMenuButton} href="/profile/[id]" as={`/profile/${username}`}> <Button> <strong className={classes.navbarDesktopMenuButton}>My Profile</strong> </Button> </Link>Estoy bastante seguro de que estoy navegando por la ruta correcta, así que no estoy seguro de por qué sigo recibiendo el 404.
Tenga en cuenta que si navego por primera vez, será 404 durante un segundo y luego aparecerá la página. Pero si navego fuera de la página y vuelvo a navegar, entonces simplemente está atascado en el 404, la 2.ª, 3.ª, 4.ª vez, etc.
Sé que es algo de nextjs que simplemente estoy malinterpretando, ya que la ruta funciona bien si tuviera que usar etiquetas <a> en lugar de etiquetas <Link>
Cualquier ayuda será apreciada, gracias.
Puedes probar esto.
<Link className={classes.navbarDesktopMenuButton} href={{ pathname: "/profile/[id]", query: { id: username }, }} as={`/profile/${username}`} > <Button> <strong className={classes.navbarDesktopMenuButton}>My Profile</strong> </Button> </Link>use la etiqueta 'a', dentro de la etiqueta Enlace.
https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes
para las últimas versiones de nextjs:
Es posible que deba usar una etiqueta de anclaje en lugar del componente de botón, ¡pero el resto de este código debería hacer que funcione!
<Link className={classes.navbarDesktopMenuButton} href={`/profile/${username}/`}> <Button> <strong className={classes.navbarDesktopMenuButton}>My Profile</strong> </Button> </Link>