(SOLVED)(Next.js 13 + Next-i18next): Translations does not work on specific page when deployed to AWS Amplify

Question

When i run locally (even with yarn start in prod mode), my translations work correctly. However, after i deploy my project to AWS Amplify, this specific /dashboard page is not working the translations (no error messages at all in console.log, nothing).

I have the following structure:

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

import { UserHome } from '~/templates'

export default function Dashboard() {
  return <UserHome />
}

export async function getServerSideProps({ locale }: { locale: string }) {
  const res = await serverSideTranslations(locale, ['common'])
  return {
    props: {
      ...res
    }
  }
}

This leads to UserHome template. Now the following:

import { useTranslation } from 'next-i18next'
import Image from 'next/image'

import { PageHeader, TableCampaign } from '~/components'
import { tableData } from '~/components/TableCampaign/mock'

import Base from '../Base'
import styles from './user-home.module.css'

const UserHome = () => {
  const { t } = useTranslation('common')
  return (
    <Base>
      <PageHeader image="/img/computer.svg" title={t('tableCampaign.title')}>
        <div className={styles.header__legends}>
          <div className={styles.header__infos}>
            <div className={styles.header__legend}>
              <div
                className={`${styles.header__circle} ${styles.header__circle__success}`}
              ></div>
              <p className={styles.header__state}>
                {t('tableCampaign.active')}
              </p>
            </div>
            <div className={`${styles.header__legend} mt-2`}>
              <Image
                src="/icon/eye.svg"
                alt="Eye icon"
                className="mr-2"
                width={24}
                height={24}
              />
              <p className={styles.header__state}>{t('tableCampaign.view')}</p>
            </div>
          </div>

          <div className={`${styles.header__infos} mx-6`}>
            <div className={styles.header__legend}>
              <div
                className={`${styles.header__circle} ${styles.header__circle__warning}`}
              ></div>
              <p className={styles.header__state}>
                {t('tableCampaign.pending')}
              </p>
            </div>
            <div className={`${styles.header__legend} mt-2`}>
              <Image
                src="/icon/edit.svg"
                alt="Pen icon"
                className="mr-2"
                width={24}
                height={24}
              />
              <p className={styles.header__state}>{t('tableCampaign.edit')}</p>
            </div>
          </div>

          <div className={styles.header__infos}>
            <div className={styles.header__legend}>
              <div
                className={`${styles.header__circle} ${styles.header__circle__danger}`}
              ></div>

              <p className={styles.header__state}>
                {t('tableCampaign.finished')}
              </p>
            </div>
            <div className={`${styles.header__legend} mt-2`}>
              <Image
                src="/icon/download.svg"
                alt="Download icon"
                className="mr-2"
                width={24}
                height={24}
              />
              <p className={styles.header__state}>
                {t('tableCampaign.download')}
              </p>
            </div>
          </div>
        </div>
      </PageHeader>
      <TableCampaign tableList={tableData} />
    </Base>
  )
}

export default UserHome

The translations of UserHome and Base component, and the components inside Base are not working. The other pages are working correctly. Do you guys have any idea?