Error serializing returned from `getServerSideProps`

Salut, après plusieurs heures de galère, je viens demander un peu d'aide. J'essai de mettre en place un chemin dynamique mais j'ai une erreur que je n'arrive pas à débugger.

Précision, il s'agit de NextJS 13.

J'ai une pages avec tous mes articles que je récupère bien de MongoDB

-pages/articles/index.jsx

//Libraire
import { connectToMongoDb } from '../../helpers/mongodb';

//Components
import CardPost from '../../components/UI/Card/CardPost';

//Style
import style from './page.module.scss';

//SEO
import siteMetadata from '../../data/siteMetaData';
import HeadSeo from '../../components/seo/HeadSeo';

export default function Index(props) {
  return (
    <>
      {' '}
      <HeadSeo
        title={`Title`}
        description={`Description`}
        canonicalUrl={siteMetadata.siteUrl}
        ogTwitterImage={siteMetadata.siteLogoSquare}
        ogType={'website'}
      />
      <main className={style.Articles}>
        <h1>Articles</h1>
        {props.data.map((article) => (
          <CardPost key={article._id} data={article} />
        ))}
      </main>
    </>
  );
}

export async function getStaticProps() {
  // let connect;
  let data;

  try {
    const client = await connectToMongoDb();
    const db = client.db('projets');

    data = await db.collection('mes_Projets').find().toArray();
  } catch (error) {
    data = [];
  }

  return {
    props: {
      data: JSON.parse(JSON.stringify(data)),
    },
  };
}

J'ai un composant CardPost qui est mappé et qui renvoi sur un lien /articles/{titre}

//Librairies
import Link from 'next/link';
import { useRouter } from 'next/router';

//Styles
import style from './Card.module.scss';

export default function Card(props) {
  //Variable
  const router = useRouter();
  const { titre, description, categorie, slug } = props.data;
  console.log(slug);

  return (
    <Link href={`/articles/${titre}`} className={style.Card}>
      <h2>{titre}</h2>
      <p>{description}</p>
      <p>{categorie}</p>
      <p>{slug}</p>
    </Link>
  );
}

Helpers/ConnectToMongoDb

import { MongoClient } from 'mongodb';

// export async function connectToMongoDb() {
//   const uri = process.env.MONGODB_URI;
//   const data = await MongoClient.connect(uri);
//   const db = data.db();
//   return client;
// }

export async function connectToMongoDb() {
  const uri = process.env.MONGODB_URI;
  const client = new MongoClient(uri);

  return client;
}

page de l'article pages/articles/[article].jsx

//Libraire
import { connectToMongoDb } from '../../helpers/mongodb';
import { Link } from 'next/link';

//Style
import style from './article.module.scss';

//SEO
import siteMetadata from '../../data/siteMetaData';
import HeadSeo from '../../components/seo/HeadSeo';

export default function Index(props) {
  const { titre, description, slug } = props.data;
  console.log(props);

  return (
    <>
      {' '}
      <HeadSeo
        title={`Title`}
        description={`Description`}
        canonicalUrl={siteMetadata.siteUrl}
        ogTwitterImage={siteMetadata.siteLogoSquare}
        ogType={'website'}
      />
      <main className={style.Article}>
        <h1>{titre}</h1>
        <p>{description}</p>
        <p>{slug}</p>
      </main>
    </>
  );
}

export async function getServerSideProps(context) {
  // Variables
  let projetRecupere;
  let { params } = context;
  const titre = params.titre;

  try {
    const client = await connectToMongoDb();
    const db = client.db('projets');

    // Récupérer le projet en cours
    projetRecupere = await db
      .collection('mes_Projets')
      .find({ titre: titre })
      .toArray();
  } catch (error) {
    projetRecupere = [];
  }

  // if (!projetRecupere[0]) {
  //   return {
  //     //Renvoi erreur 404
  //     // notFound: true,
  //     redirect: {
  //       destination: '/',
  //     },
  //   };
  // }

  return {
    props: {
      data: JSON.parse(JSON.stringify(projetRecupere))[0],
    },
  };
}

Et une page dynamique qui doit m'afficher les détails de l'article et je pense que le problème vient de cette page car le reste fonctionne.

- Je mets bien en place le context afin de récupérer les informations de l'url /articles/{titre}.

- Je me connect à la DB en ciblant le nom de DB (il y en a plusieurs) et la collection (même procédé que sur index.jsx.

- Je retourne les datas dans props au format JSON que je parse (et c'est là que je comprend pas le message d'erreur et pourquoi data est undefine).

Quand je clique sur le lien qui doit me diriger vers l'article avec ces informations j'ai l'erreur suivante:

Erreur:

Error: Error serializing `.data` returned from `getServerSideProps` in "/articles/[article]".

Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

J'avoue que j'ai encore un peu de mal avec la compréhension des rendus sur NextJS mais j'y travaille.

Merci d'avance pour l'aide.

Emerson