Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types

Question

I am using prisma and Next.js. When I try to retrieve the content from prisma in getStaticProps it does fetch the data but I can't pass it on to the main component.

export const getStaticProps = async () => {
  const prisma = new PrismaClient();
  const newsLetters = await prisma.newsLetters.findMany();
  console.log(newsLetters);

  return {
    props: {
      newsLetters: newsLetters,
    },
  };
};

As you can see in this image it is fetching as well as printing the content.

But when I pass I get the following error for passing it as props

Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

Answer 1

Looks like nextJS doesn't like serializing anything but scalar types for performance reasons. You can read more in this github issue. Best way you can handle this is that you convert your Date objects to UNIX timestamp before returning them.

// your data
let newsLetters = [
    {
        id: 'your-id',
        email: '[email protected]',
        createdAt: new Date()
    }
];

// map the array
newsLetters.map(x => {
    x.createdAt = Math.floor(x.createdAt / 1000);
    return x;
})

// use newsLetters now
console.log(newsLetters);

Answer 2

According to NextJS API Docs getStaticProps return "should be a serializable object so that any props passed, could be serialized with JSON.stringify."

Under the hood they allow, boolean, number, string, and anything that passes Lodash isPlainObject test. https://lodash.com/docs/#isPlainObjectChecks. In Lodash Documentation for this function it claims "Checks if value is a plain object, that is, an object created by the Object constructor or one with a [[Prototype]] of null."

The Following stack post discusses the difference. The difference between object and plain object in JavaScript?

Building on @Viktor Kynchev answer, depending on what your needing from the prop you can just convert it to a string, or number or some other type accepted by Lodash's isPlainObject.

For me I had a date Object provided via Prisma API just like OP, and I just converted it to a string like so.

for (const element of newsLetters) {
  element.createdAt = element.createdAt.toString()
}