How to import ts and html with getStaticProps for a static site in Next.js?

user_12211148 0
Viewed 60

I want to render static data that is coming from a typescript file and display it to the user. As far as I know, I have to use getStaticProps to make the site static. But I'm getting an error because it's not a JSON file. Do I really have to put it through getStaticProps to make it static or as it is a javascript import like a component just with data it is static by default? How would I work around the Error message 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 },
  };
};
next.js javascript
1 Answers

The value of props returned from the getStaticProps needs to be serializable i.e. it can be converted to a string (language agnostic representation which can be shared among different languages) with JSON.stringify() and back to its original value with JSON.parse() again. JavaScript function, Symbol, JSX, etc. are not serializable property.

Here is what's supported. https://www.json.org/json-en.html

In your projects array, the value of the extra key is a JSX element that is not a serializable property:

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;

Thus you are getting this 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.

You can change the value of extra to a string instead and the error should be fixed. For eg.: extra: "Extra 02" and use the string to print value inside of div in the component.

user_106236340
Related