How to pass dynamic value from getServerSideProps to i18next-http-backend request function

[yaman3bd]

hi, I am using i18next-http-backend to fetch translations from external API, and I have implemented a custom request for it, I need to pass with the request some headers that have a dynamic value based on the request host, but I was not able to find a way how to do it.
my next-i18next.config.js:

const HttpBackend = require("i18next-http-backend/cjs");
const MultiLoadBackendAdapter = require("i18next-multiload-backend-adapter/cjs");
const { axios } = require("./lib/axios");

const env = process.env.NODE_ENV;

module.exports = {
  i18n: {
    locales: ["ar", "en"],
    defaultLocale: "ar"
  },
  ns: ["auth", "otp"],
  defaultNS: "common",
  maxParallelReads: 30,
  serializeConfig: false,
  reloadOnPrerender: env === "development",
  use: [MultiLoadBackendAdapter],
  backend: {
    backend: HttpBackend,
    backendOption: {
      loadPath: "{{lng}}|{{ns}}",
      request: async (options, url, payload, callback) => {
        try {
          const [lng, ns] = url.split("|");

          await axios
            .get("/translations", {
              params: { group: ns.split("+") },
              headers: {
                //custom header here
              }
            })
            .then((response) => {
              callback(null, {
                data: response.data.data,
                status: 200
              });
            })
            .catch((error) => {
              // eslint-disable-next-line no-console
              console.log("response error: ", error.response.data);
              callback(null, {
                status: 500
              });
            });
        } catch (e) {
          // eslint-disable-next-line no-console
          console.log("catch error: ", e);
          callback(null, {
            status: 500
          });
        }
      }
    }
  }
};

in getServerSideProps:

export const getServerSideProps: GetServerSideProps = async ({ locale, req }) => {
 const domain = req.headers.host;
 
  return {
    props: {
      //I want to pass the `domain` to the request function in `backendOption`
      ...(await serverSideTranslations(locale ?? i18nextConfig.i18n.defaultLocale, ["common", "titles"], i18nextConfig))
    }
  };
};

Can anyone help me with the issue?

Thanks!

[yaman3bd]

I have been trying out some ways to dynamically pass custom headers to i18next-http-backend. Here's what I've found so far:

1. Modifying i18nextConfig in getServerSideProps:

• in getServerSideProps, directly modify i18nextConfig object:

export const getServerSideProps: GetServerSideProps = async ({ locale, req }) => {
  const domain = req.headers.host;
  // Assign the dynamic domain to customHeaders
  i18nextConfig.backend.backendOption.customHeaders = {
    "X-Academy-Domain": domain
  };

  return {
    props: {
      ...(await serverSideTranslations(locale ?? i18nextConfig.i18n.defaultLocale, ["common", "titles"], i18nextConfig))
    }
  };
};

• then in next-i18next.config.js, access the custom headers:

module.exports = {
  // ...other config settings
  backend: {
    backend: HttpBackend,
    backendOption: {
      loadPath: "{{lng}}|{{ns}}",
      customHeaders: {},
      request: async (options, url, payload, callback) => {
        const [lng, ns] = url.split("|");

        await axios.get("/translations", {
          params: { group: ns.split("+") },
          headers: {
            // access the customHeaders
            "X-Academy-Domain": options.customHeaders["X-Academy-Domain"]
          }
        });
      }
    }
  }
};

2. Modifying next-i18next.config.js to Accept Function:

• make next-i18next.config.js export a function that returns the config object. This would allow me to pass dynamic parameters (like domain) directly to the function:

module.exports = function (domain) {
  return {
    // ...other config settings
    backend: {
      backend: HttpBackend,
      backendOption: {
        loadPath: "{{lng}}|{{ns}}",
        request: async (options, url, payload, callback) => {
          const [lng, ns] = url.split("|");

          await axios.get("/translations", {
            params: { group: ns.split("+") },
            headers: {
              "X-Academy-Domain": domain
            }
          });
        }
      }
    }
  };
};

• then in getServerSideProps, pass the domain to the function as a parameter:

export const getServerSideProps: GetServerSideProps = async ({ locale, req }) => {
  const domain = req.headers.host;

  const config = i18nextConfig(domain);

  return {
    props: {
      ...(await serverSideTranslations(locale ?? config.i18n.defaultLocale, ["common", "titles"], config))
    }
  };
};

but for the 2nd approach, I need to make adjustments to how next.config.js and _app.tsx are using the config.

• in next.config.js, I need to immediately invoke the function to get the config object:

const { i18n } = require("./next-i18next.config.js")();

module.exports = {
  // ...other settings
  i18n: {
    ...i18n,
    localeDetection: false
  }
};

• and in _app.tsx for appWithTranslation I need to immediately invoke the function while I pass it as a Parameter,

import i18nextConfig from "@/next-i18next.config.js";

export default appWithTranslation(App, i18nextConfig());

but I do not know if i18next-http-backend sends a request in appWithTranslation to fetch translations in the initial setup, if so I need to find a way to obtain the domain.

I would appreciate it if someone could confirm which method is better, or if anyone could suggest an alternative way to dynamically pass custom data to i18next-http-backend.

Thanks.

[adrai]

there is no "better", both options are "hacks"

[yaman3bd]

I would want to use the first approach because it's more straightforward but I am scared I may run into Concurrent Requests issue. I had this issue before with global axios instance.
For example, when two different requests from site1.com and site2.com arrive at nearly the same time, they both try to set their host in the global i18nextConfig instance. so the request sets the host last will overwrite the previous setting, leading to both requests potentially using the same tenant host.

in a similar scenario, could you tell me how would you pass dynamic headers to the request in i18next-http-backend to avoid any potential issues?

[adrai]

I personally never use custom requests and don't need dynamic headers