Al navegar desde un enlace en la misma aplicación web a la página enrutada dinámicamente al hacer clic en un enlace, el resultado es el esperado: navego a la página de un producto (http://localhost/1).
Pero cuando navego directamente nombrando el número de producto específicamente en la barra de búsqueda (navegando a http://localhost/2), aparece el siguiente error:
Server Error TypeError: Cannot read property 'image' of undefined > | <Image src={"/../public/images/" + p.image} ^Hasta ahora, he intentado hacer coincidir los tipos y leer los documentos de Next JS sobre el enrutamiento dinámico.
Eliminé la matriz cero del filtro pero aún no tengo resolución.
¿Podría ser posible que el enrutamiento solo funcione al hacer clic en un enlace en Next JS? ¿Hay alguna configuración faltante que he descuidado?
import { useRouter } from 'next/router' import Image from 'next/image' import data from '../products.json' export default function Template() { const router = useRouter() const { pid } = router.query const p = data.filter(product => product._id == pid)[0] // Choose one result return ( <Image src={"/../public/images/" + p.image} height="500px" width="500px" /> ) } [ { "_id": 1, "name": "Toyota", "image": "toyota.png" }, { "_id": 2, "name": "BMW", "image": "bmw.png" } ] Actualización: he intentado codificar el atributo src en la etiqueta de la imagen y el nuevo error dice que el problema son las otras referencias. Entonces, puedo decir con seguridad que el problema es hacer que no se devuelva ningún objeto cuando se llama al objeto de datos.
¡Resolví el problema!
No fue suficiente usar Rutas Dinámicas usando la función 'useRouter()'. También tuve que definir estas dos funciones:
export async function getStaticProps(context) { // No-op since getStaticPaths needs getStaticProps to be called. return { props: {} } } export async function getStaticPaths() { const dynamicFiles = products.map(product => ( { params: { pid: String(product._id) }, // Product IDs are ints in JSON file } )) return { paths: dynamicFiles, fallback: false } } Esto tiene sentido ya que no querrá que se usen rutas aleatorias como variable. Por ejemplo, un usuario podría especificar http://localhost/1234 cuando 1234 no es una opción válida.
https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops