I'm using the 18nexus dashboard and its packages with pages router to internationalise my next app. However I've got hydration errors which I wasnt able to fix.
I followed this docs: https://i18nexus.com/tutorials/nextjs/next-i18next
And eventually I implemented the translation in one of my components like this:

import { useState } from "react";

import { motion } from "framer-motion";
import Image from "next/image";
import { logo, close, menu } from "../../assets";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useTranslation } from "next-i18next";

export async function getStaticProps({ locale }: any) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["landingPage"])),
    },
  };
}

function Navbar() {
  const [active, setActive] = useState("Home");
  const [toggle, setToggle] = useState(false);
  const { t } = useTranslation();

  return (
    <motion.div>
      <motion.nav
        animate={{ opacity: [0, 1], y: [200, 0] }}
        transition={{ duration: 0.4 }}
        className="w-full flex py-6 justify-between items-center navbar"
      >
        <Image
          src={logo}
          alt="studentAI"
          className="w-[140px] h-[35px]"
          width={50}
          height={50}
        />

        <ul className="list-none sm:flex hidden justify-end items-center flex-1">
          {t("landingPage:test")}

         
        </ul>

      </motion.nav>
    </motion.div>
  );
}

export default Navbar;

This is my dashboard using the correct namespace and key:
And this is the error that I get:

I would highly appreciate any kind of help.