I am trying to display static data sourced from a TypeScript file to the user. I understand that I need to use getStaticProps to ensure that the site is indeed static. However, I encountered an error indicating that it is not a JSON file. Do I really need to pass it through getStaticProps to make it static, or is it already considered static by default since it's just a javascript import with data? How can I resolve the Error message provided below?
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.
projects.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;
index.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 },
};
};