How to set the default locale based on the user's selected locale in the admin dashboard #2211

yaman3bd · 2023-09-22T15:35:26Z

yaman3bd
Sep 22, 2023

Hello,

I’m currently working on a multi-tenant aoo where the user has the option to select the default locale from a list of available locales (ar, en). for now, the app supports only one language at a time, either ar or en, and I need to dynamically set next-i18next default locale to the one that the user has selected.

Here's how I've implemented it so far:

In getServerSideProps, I am fetching the tenant settings and getting the tenant locale.
To set the lang attribute in the HTML documentElement, I set the NEXT_LOCALE cookie and Content-Language header to the tenant locale.
pass the locale to serverSideTranslations to fetch the correct translations.
In my custom _document.tsx, I read the locale from NEXT_LOCALE to set the lang and dir attributes dynamically based on the user's chosen locale.

here is how my code looks like:

index.tsx

import { GetServerSideProps } from "next";

import { serverSideTranslations } from "next-i18next/serverSideTranslations";

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

export const getServerSideProps: GetServerSideProps = async ({ locale, res }) => {
  //fetch tenant settings
  const data = await fetch("some-url");
  const tenant = await data.json();

  //get tenant locale
  const tenant_locale = tenant?.locale;

  const appLocale = tenant_locale ?? locale ?? i18nextConfig.i18n.defaultLocale;

  //set the locale in the cookies, so I can access it in `_document.tsx`
  res.setHeader("Set-Cookie", `NEXT_LOCALE=${appLocale}`);
  res.setHeader("Content-Language", appLocale);

  return {
    props: {
      //pass appLocale to the func to fetch the right locales
      ...(await serverSideTranslations(appLocale, ["common", "chapter_contents", "validation"], i18nextConfig))
    }
  };
};

_document.tsx:

import Document, { DocumentContext, DocumentProps, Head, Html, Main, NextScript } from "next/document";

type Props = DocumentProps & {
  // add custom document props
};

class MyDocument extends Document<Props> {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);

    let locale = ctx.locale;

    if (ctx.req && ctx.req.headers.cookie) {
      //get app locale from header cookies
      locale = ctx.req.headers.cookie
        .split(";")
        .find((c) => c.trim().startsWith("NEXT_LOCALE="))
        ?.split("=")[1];
    }

    return { ...initialProps, locale };
  }

  render() {
    const currentLocale = this.props.locale;
    const dir = currentLocale === "ar" ? "rtl" : "ltr";

    return (
      <Html
        lang={currentLocale}
        dir={dir}
      >
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

However, I’ve noticed that on the first page render, while the lang attribute of the document element is correctly set, it reverts back to the default locale from my configuration whenever the route changes.

my questions and issues are:

How can I dynamically change the defaultLocale in both i18next and Next.js based on user selection?
Is setting the NEXT_LOCALE cookie and accessing it in _document.tsx a correct approach for setting the right lang and dir? Are there better alternatives?
Is there a more efficient or recommended approach to achieving dynamic default locale selection based on user preferences?
Why does Next.js reset the lang attribute to the default locale in the config on each route change, and and how can I prevent this?
When I log the locale using useRouter, it returns the default locale, it does not change until I add the language prefix to the URL (e.g., /en/path). How can I change the locale without changing the URL?

any help or guidance would be greatly appreciated. Thank you!

adrai · 2023-09-22T15:46:11Z

adrai
Sep 22, 2023
Maintainer

currently afk... not read all your text so carefully, but Next.js is doing its own language detection, if I remember correctly there should be an option to disable that in the nextjs config... vercel/next.js#18617

5 replies

yaman3bd Sep 22, 2023
Author

Thank you so much for the incredibly quick response! I truly appreciate your helpful assistance,

but I have disabled the language detection:
my next-i18next.config

i18n: {
  locales: ["ar", "en"],
  defaultLocale: "ar",
}

and in my next.config.js

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

const nextConfig = {
  i18n: {
    ...i18n,
    localeDetection: false
  }
};

adrai Sep 22, 2023
Maintainer

then you might ask the Next.js team for more insights on why it behaves like that

yaman3bd Sep 22, 2023
Author

could you help me please with these issues/questions I have, if they are not related to Next.js?

How can I dynamically change the defaultLocale in i18next based on user selection?

Is setting the NEXT_LOCALE cookie and accessing it in _document.tsx a correct approach for setting the right lang and dir? Are there better alternatives?

Is there a more efficient or recommended approach to achieving dynamic default locale selection based on user preferences?

adrai Sep 22, 2023
Maintainer

These are Next.js specific questions... I suspect your requirements can't be fulfilled with the Next.js Psges setup. With the newer App-Router setup you have more flexibilities.

yaman3bd Sep 22, 2023
Author

thanks a lot for your time, I will ask in Nextjs discord community, however, it is hard for me now to switch to the App-Router so I was looking for a workaround until I switch to the new App setup.

thanks a lot for helping me go over the issues I have been facing, but I have one issue that I could not find a working solution or workaround for it, if you could please take a look at it, I would be greatly thankful.

it is related to how I could force invalidate locales cache using i18next-fs-backend and i18next-http-backend

How to force invalidate locales cache?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to set the default locale based on the user's selected locale in the admin dashboard #2211

{{title}}

Replies: 1 comment 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

How to set the default locale based on the user's selected locale in the admin dashboard #2211

yaman3bd Sep 22, 2023

Replies: 1 comment · 5 replies

adrai Sep 22, 2023 Maintainer

yaman3bd Sep 22, 2023 Author

adrai Sep 22, 2023 Maintainer

yaman3bd Sep 22, 2023 Author

adrai Sep 22, 2023 Maintainer

yaman3bd Sep 22, 2023 Author

yaman3bd
Sep 22, 2023

Replies: 1 comment 5 replies

adrai
Sep 22, 2023
Maintainer

yaman3bd Sep 22, 2023
Author

adrai Sep 22, 2023
Maintainer

yaman3bd Sep 22, 2023
Author

adrai Sep 22, 2023
Maintainer

yaman3bd Sep 22, 2023
Author