Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Práctico de Next.js

Curso Práctico de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

next/link: enlaces en Next.js

13/22
Recursos

Aportes 8

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hola compañeros, debe tener que ver con asincronismo y la llegada de la petición a la API, pero me salía el siguiente error (siguiendo el codigo de la clase, hasta copiándolo) :
(
La razón es que no le llegaba una URL correctamente.
Entonces, en lugar de tener la etiqueta Image en el return de ProductItem.jsx :

<Image src={product.images[0]} alt={product.title} width={240} height={240} />

Le agregamos una validación, en el que si existe el valor de product.images[0] ahora si renderice la Image

{product.images[0] && <Image src={product.images[0]} alt={product.title} width={240} height={240} />}

😄

Investigando un poco, dentro de un useffect no se puede poner una función async.

Me parece bastante interesante la forma de emular las rutas de Next, me recuerda a método 100% vanilla con html porque es bastante similar y intuitivo.

Los estilos tremendamente mal, pero los fundamentos claros, que horrible es migrar algo ajjaja

Si les da algún error puede ser porq vscode hace autocompletado del siguiente código en productItem.jsx, lo coloca como una funcion y no es la forma correcta

function ProductItem({ product }) {
	const { state, addToCart } = useContext(AppContext);

deberia quedar asi :

const ProductItem = ({ product }) => {
	const { state, addToCart } = useContext(AppContext); 

ademas debemos agregar esta linea en las imagenes del producto:

<Image src={product.images[0]} width={240} height={240} alt={product.title} />

con esto se soluciona el problema!

Después de migrar todo a la estructura de sass me queda claro que la próxima vez mejor trabajo con css-in-js 😬😅

Saludos compañeros, si después de agregar el domain de placeimg les sigue dando el mismo error, es porque parece ser que la API cambió de sitio de donde autogenera las imágenes.
Para ir a la segura yo dejé ambas opciones en el archivo de next.config.js de la siguiente manera:

Cambien los asteriscos (*) por puntos (.) porque Platzi no me dejó escribirlos porque los detecta como enlaces no seguros.

images: {
    domains: ['placeimg*com', 'api*lorem*space'],
  },

Me gustaría saber cual es el tema de su editor 😛 me gusta bastante