No sé si esto es demasiado específico para preguntar en un desbordamiento de pila, pero he seguido un tutorial de hace unos años sobre cómo crear una aplicación similar a Codepen con React (NextJS) y MongoDB.

Al principio, traté de seleccionar a mano las funciones que realmente necesito para lo que estoy a punto de hacer con esta aplicación, pero luego me quedé atascado en el siguiente mensaje de error:

Error de tiempo de ejecución no controlado TypeError: no se pueden leer las propiedades de undefined (leyendo 'updatedRecord')

Que se refiere a mi función de guardar (index.js):

 const save = async () => { setSaving(true); const requestOptions = { method: !id ? "PUT" : "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ html: htmlValue, css: cssValue, js: jsValue, id: id, }), }; const response = await fetch(`../api/pens/${id}`, requestOptions); const { data: { updatedRecord, newRecordId }, } = await response.json(); setSaving(false); if (!updatedRecord) { await router.push(`?id=${newRecordId}`); } };

Este error se activa cada vez que intento guardar un bolígrafo nuevo (presionando el botón Guardar, que llama a la función Guardar presentada anteriormente), y por lo que he podido deducir es que probablemente hay algo que ya no es compatible por las versiones más nuevas de React/NextJs/MongoDB/NodeJs, simplemente no puedo entender qué es.

Aquí está la versión de su código (quien escribió el tutorial) en su totalidad. He intentado prácticamente todo, desde clonar todo el proyecto al mío y, sin embargo, no puedo hacer que funcione, así que estoy en un aprieto aquí.