Quiero representar datos estáticos que provienen de un archivo mecanografiado y mostrárselos al usuario. Hasta donde yo sé, tengo que usar getStaticProps para hacer que el sitio sea estático. Pero recibo un error porque no es un archivo JSON . ¿Realmente tengo que pasarlo por getStaticProps para que sea estático o, como es una importación de JavaScript como un componente solo con datos, es estático de forma predeterminada? ¿Cómo evitaría el siguiente mensaje de error?
Error:
Error: Error serializing `.projects[0].extra.$$typeof` returned from `getStaticProps` in "/index". Reason: `symbol` cannot be serialized as JSON. Please only return JSON serializable data types.proyectos.tsx
const projects: [ { id: "6853939", name: "Project 01", title: "Title 01 ", previewImg: "/images/projectThumbnails/image01.jpg", extra: (<div>Extra 01</div>), }, { id: "6853939", name: "Project 02", title: "Title 02 ", previewImg: "/images/projectThumbnails/image02.jpg", extra: (<div>Extra 02</div>), } ]; export default projects;índice.tsx
import projects from "../data/projects.tsx"; const IndexPage = ({projects}) => { return ( <> <div> {projects.map((i) => ( <div key={i.id}>{i.title}</div> ))} </div> <div> {names.names.map((i) => ( <div key={i.name}>{i.name}</div> ))} </div> </> ); }; export const getStaticProps = async () => { return { props: { projects: projects }, }; };El valor de los accesorios devueltos por getStaticProps debe ser serializable, es decir, se puede convertir en una cadena (representación independiente del idioma que se puede compartir entre diferentes idiomas) con JSON.stringify() y volver a su valor original con JSON.parse() otra vez. La function de JavaScript, el Symbol , JSX , etc. no son propiedades serializables.
Esto es lo que se admite. https://www.json.org/json-en.html
En su matriz de proyectos, el valor de la clave extra es un elemento JSX que no es una propiedad serializable:
const projects: [ { id: "6853939", name: "Project 01", title: "Title 01 ", previewImg: "/images/projectThumbnails/image01.jpg", extra: (<div>Extra 01</div>), // <= this is not serializable property }, { id: "6853939", name: "Project 02", title: "Title 02 ", previewImg: "/images/projectThumbnails/image02.jpg", extra: (<div>Extra 02</div>), // <= this is not serializable property } ]; export default projects;Por lo tanto, está recibiendo este error.
Error: Error serializing `.projects[0].extra.$$typeof` returned from `getStaticProps` in "/index". Reason: `symbol` cannot be serialized as JSON. Please only return JSON serializable data types. Puede cambiar el valor de extra a una cadena en su lugar y el error debería corregirse. Por ejemplo: extra: "Extra 02" y use la cadena para imprimir el valor dentro de div en el componente.