Translations not loading in on production with getServerSideProps and next-i18next

[thibaultferaux]

In Next.js I am using the package next-i18next for my translations.

All my translations are working fine and when I have a page with getServerSideProps it works on my local development server but when I push it to production with Vercel the translations on those pages are not working. On pages where I use getStaticProps it works.

FYI: I use the pages router in Next.js.

This is my getServerSideProps function:

export async function getServerSideProps({ query, locale }) {
  const directus = await getDirectusClient()
  const { id } = query;
  const quote = await directus.items("Quotes").readOne(id, {
    fields: ["*.*"],
  });

  if (!quote) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      quote,
      ...(await serverSideTranslations(locale, ["common", "nav", "portal", "footer", "configurations"])),
    },
  };
}

This is how I call the translations in the component

const { t } = useTranslation(["portal", "configurations", "common"]);

I render a translation by: <p>{ t('quote details') }</p>

Is there anyone who recognizes this problem and knows how to solve it?

I tried it on another component that was working with getStaticProps, and changed it to getServerSideProps. I wanted to know if it was a problem with the component or not but on the component that was working before it didn't work and just rendered the name of the labels from the translations :(.

[adrai]

This seems to work:

next-i18next/examples/simple/pages/second-page.tsx

Line 40 in 9b44b39

export const getServerSideProps: GetServerSideProps<Props> = async ({

deployed to vercel: https://next.i18next.com/second-page