If you’ve used Next.js with a database you’ve surely ran into an issue like this.

You fetch some data in getServerSideProps() or getStaticProps(), for example like this with Prisma:

export async function getServerSideProps() {
  let cars = await prisma.car.findMany()

  return {
    props: {
      cars,
    },
  }
}

Now if the database table has a field that contains a date, that’s converted to a Date object in JavaScript and you’ll get an error like this:

This is because you must return a JSON-serializable object. A Date object cannot be natively transformed into JSON.

In this case the solution can be as simple as this:

export async function getServerSideProps() {
  let cars = await prisma.car.findMany()

  cars = JSON.parse(JSON.stringify(cars))

  return {
    props: {
      cars,
    },
  }
}

This has the effect of converting the Date object to a string.

I like this solution because it’s obvious, visible, and not intrusive.

Another solution is to use a library called superjson and its Next.js adapter next-superjson:

npm install next-superjson superjson

and add it to next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

const { withSuperjson } = require('next-superjson')

module.exports = withSuperjson()(nextConfig)

I found it on the James Perkins blog post Dealing with Date objects in Next data fetching.

A similar error happens for example if you try to return a complex object like a Fetch response:

export async function getServerSideProps() {
  const res = await fetch(...)

  return {
    props: {
      res
    },
  }
}

But in this case the fix is not that easy.

You need to first get the response text like

export async function getServerSideProps() {
  const res = await fetch(...)
  const data = await res.json() 

  return {
    props: {
      data
    },
  }
}

Lessons in this unit:

0:	Introduction
1:	Blank page after router.push() in Next.js?
2:	How to fix the error `PrismaClient is unable to be run in the browser` in Next.js
3:	Next.js, blank page after calling `res.redirect()`
4:	Next.js, how to fix the error `Constructor requires 'new' operator`
5:	Next.js, fix the `module not found` error
6:	How to fix the `can't resolve module` error in Next.js
7:	▶︎ How to fix error serializing Date object JSON in Next.js
8:	How to fix the `unable to resolve dependency tree` PostCSS and Tailwind issue in Next.js
9:	Fix “Module not found: Can't resolve encoding” in Next.js
10:	How to fix Your custom PostCSS configuration must export a `plugins` key.
11:	Next.js, what to do when the state of a component is not refreshed when navigating
12:	Revalidation and ISR gotcha on Vercel
13:	How to fix the `Already 10 Prisma Clients are actively running` error