how to use findById on Next.js

[SanityZeroPercent]

Hey guys,

I'm a newbie on mongoose. So basically, i want to find by id on next.js but it fails miserably.

Here's my code:

import Link from 'next/link'
import dbConnect from '../../lib/dbConnect'
import Levelling from '../../models/Levelling'

/* Allows you to view user card info*/
const LevellingPage = ({ pet }) => {
  return (
    <div key={pet._id}>
        <div className="card">
          <img 
            src={pet.image_url}
          />
          <h3 className="fpanel-name">{pet.displayname}</h3>
          <div className="main-content">
            <p className="displayname">{pet.displayname}</p>
            <p className="levels">Level {pet.level}</p>
            <p className="stats">Total XP: {pet.formatxp}</p>
            <p className="stats">Total Message: {pet.formatmessage}</p>
            <div className="btn-container">
              <Link href="/">
                <button className="btn view">Go Back</button>
              </Link>
            </div>
          </div>
        </div>
    </div>
  )
}

export async function getServerSideProps({ params }) {
  await dbConnect()

  const pet = await Levelling.findById(params.id).lean()
  pet._id = pet._id.toString()

  return { props: { pet } }
}

export default LevellingPage

and this is the error i got:

Server Error
Error: Error serializing `.pet.id` returned from `getServerSideProps` in "/[id]".
Reason: `object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.

Please help me, thank you 🙏

[vkarpov15]

See vercel/next.js#11993 . Do return { props: { pet: JSON.parse(JSON.stringify(pet)) } } instead. NextJS requires you to explicitly convert pet into an object that is representable in JSON beforehand. So no Date objects, no ObjectIds, etc.

[SanityZeroPercent]

You are lifesaver, thank you so much 👍