How to fix error message initial locale not passed to into serversidetranslation next-i18next?

Question

i am having issue with next-i18next translate at build time when deploying on vercel. It returns error message "Initial locale argument was not passed into serverSideTranslations" for my index and dynamic pages. please see my index.js snippet below

import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation, Trans } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

import { Services } from "../components/Services";
import { Contact } from "../components/contact/Contact";
import { AboutUs } from "../components/AboutUs";
import { Team } from "../components/Team";
import Properties from "../components/property";

const myLoader = ({ src, width, quality }) => {
  return `${src}?w=${width}&q=${quality || 75}`;
};
const myLoader2 = ({ src, width, quality }) => {
  return `${src}?w=${width}&q=${quality || 75}`;
};

export default function Home({ locale }) {
  const router = useRouter();
  const { t, i18n } = useTranslation(locale, "common");
  return (
    <>
      <div>
        <Services />
        <Properties />
        <AboutUs
          aboutUsText={t("aboutUsText1")}
          aboutUsText1={t("aboutUsText2")}
          aboutUsText2={t("aboutUsText3")}
          aboutUsText3={t("aboutUsText4")}
        />
        <Team teamText1={t("teamText1")} />
        <Contact />
      </div>
    </>
  );
}

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ["common"])),
  },
});

nexti18.config

module.exports = {
  debug: true,
  i18n: {
    locales: ["es-ES", "en-US"],
    defaultLocale: "es-ES",
    localeDetection: false,
    reloadOnPrerender: process.env.NODE_ENV === "development",
    react: { useSuspense: false },
  },

  // "pages": {
  //     "*": ["common"],
  //     "/ourServices/conciergerie": ["conciergerie"],
  //     "/ourServices/realEstate": ["realEstate"]
  // }
};

can't see where is my mistake, can someone point it out for me, please?

Faisal Qureshi · Accepted Answer · 2022-07-12 15:24:20Z

4

In the index.js you have to set the locale to a default language like this

export const getStaticProps = async ({ locale = 'es-ES' }) => ({
  props: {
    ...(await serverSideTranslations(locale, ["common"])),
  },
});

answered Jul 12, 2022 at 15:24

Faisal Qureshi

565 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to fix error message initial locale not passed to into serversidetranslation next-i18next?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related