Pass date object from server component to client component in Next.js 13

Question

I'm upgrading next.js project to app directory style project. I need to fetch data from api server that contains dates. Data then should be filtered and ordered by date field. Currently I'm using next-superjson library to serialize data that is sent from server to client from getStaticProps function. After upgrading call to api is done in server component that passes this data to client component. But that data cannot be serialized because of Date field. Is there any convenient was to overcome this serialization issue ? Or should I serialize manually data and pass it as string to my client component to render it ?

Answer 1

You can use next-superjson-plugin instead.

export default function ServerComponent() {
  const date = new Date();
  return <ClientComponent date={date} data-superjson />;
}

It provides data-superjson attribute for Server Component > Client Component Serialization.