Best way to set the locale manually?

[alessandrojcm]

Hi there, I am working on migrating a legacy app to React and part of the feature set is to have multiple locale support. I have structured my locale file to have keys by use/page (ie a "Generic" key contains generic messages, "Navbar" contains the navbar's messages, "Dashboard" has the keys for the Dashboard etc). This way, each page has loads the Intl provider with the keys for itself plus the generic keys to avoid loading unnecessary translations, my page structure is like this:

.
└── app/
    └── [locale]/
        ├── layout.tsx // Generic intl provider goes here
        ├── api
        ├── auth // sign in, sign out, etc. For these pages, the lang should be automatically detected
        └── dashboard/
            ├── layout.tsx // here goes the keys for the navbar + the generic keys
            └── page-a/
                └── layout.tsx // this would have a intl provider that loads the PageA keys + generic keys, etc

The legacy app allows users to set their own custom timezone and language. Thus the React app needs to do the same, I am reading the user's preferences from the database using Sequelize and loading them using server components.

How (and where) should I override the detected language with the user-selected one? I thought about doing it in the i18n.ts file but 1) this does not feel right since I am overriding the default behavior and it is not clear 2) using sequelize in middleware is a pain anyway. I thought about doing it at the intl provider level but since there are several levels of nested providers this seems cumbersome, and the root layout would have the wrong lang attribute set in the document. Any ideas? Thanks.

[alessandrojcm]

To anyone facing a similar issue, this is how I solved it.

1. I am using Sequelize as my ORM and it currently does not work in middlewares as they only use Edge runtime. Hence I had to create a JWT protected endpoint to retrieve the user's locale preferences.
2. Since I am using Auth.js as my auth solution I have access to the signIn and signOut events. When a user signs in, I make a fetch request to the endpoint mentioned above and retrieve the preferences. This request is cached with a tag that gets invalidated when the user signs out using revalidateTag
3. I set the NEXT_LOCALE cookie with the preferences retrieved from this request.
4. Since I have a wrapper around the IntlProvider that loads keys as needed, I modified this to check if the user is authed; if so, then this cached fetch request gets loaded and it applies to all the components that reuse this provider (app-wide)