왜 생기나?

getServerSideProps 혹은 getStaticProps와 같은 서버 사이드 훅에서 Date를 넘기려고 하는 경우 발생한다.

error - Error: Error serializing `.post.date` returned from `getStaticProps` in "/blog/[slug]".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

나의 경우에는 getStaticProps에서 Date 객체가 담겨 있는 데이터를 넘길 때 발생했다.

해결법

제일 근본적인 해결법은 Date를 사용하지 않도록 만들어주는 것이다.

하지만 이런 작업을 여러 번 반복하고 싶지 않은 사용자들을 위해, Blitz.js에서 ‘superjson’이라는 도구를 내놓았다. (참고로 Blitz.js도 Next.js를 기반으로 구성되어 있다.)

superjson

상술했듯이 Blitz.js에서 사용하기 위해 만들어진 도구로, JSON에서는 지원하지 않는 Map, Date, Set, BigInt 를 자동으로 변환 → 역변환하여 대응해주는 역할을 한다.

superjson 공식 문서에서는 함께 제공되는 babel 플러그인을 이용하여 Next.js에 적용하라고 가이드하고 있다. 하지만 babel 플러그인을 사용하게 된다면 SWC 기반의 Next.js 컴파일러를 더 이상 사용할 수 없게 되어 버리기에, SWC를 사용하면서 superjson도 사용할 수 있게 도와주는 next-superjson이라는 플러그인을 적용해볼 것이다.

해당 플러그인의 유명도를 보고 설치를 꺼리게 될 수도 있는데, 해당 플러그인의 레포를 살펴보면 해당 플러그인은 단지 webpack 설정에 pages 폴더 아래에서만 babel을 적용하여 superjson의 babel 플러그인(babel-plugin-superjson-next)을 사용할 수 있도록 도와주는 플러그인이라는 것을 확인할 수 있다.

그럼, 적용해보자.

yarn add superjson next-superjson

Next.js 설정 파일에 적용되서 큰 의미는 없겠지만, 해당 플러그인들은 TypeScript 타입핑을 제공하여 추가적으로 설치하지 않아도 된다.

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

module.exports = withSuperjson()({
  // ... your next.js configuration
})

next.config.js에 next-superjson을 적용한다.

기존에 문제를 일으키던 Date 객체가 정상적으로 표시되는 것을 확인할 수 있다.