Set locale after the request

[rickvdbroek]

Is your feature request related to a problem? Please describe.

Currently I have a database with a table called projects, on that entity I have a property called locale. Now, a simplified version of my codebase, is:

// This is where an admin can perform CRUD operations
src/app/admin/projects/[id]/page.tsx

// This is where an visitors can view the project
src/app/view/projects/[id]/page.tsx

Now on the page level for the view I request my Drizzle ORM to get the project based on the [id]. Only after I get that data back, in other words "after" the request, I know what the locale needs to be.

Describe the solution you'd like

The solution I am proposing is to give setRequestLocale new purpose. I am aware that you wan't get rid of it for reasons I understand. However it might still be useful, maybe in a different form, for cases where internationalization happens after the request.

Describe alternatives you've considered

Now what I've tried is:

Attempt #1

const getProject = async () => {
  /** Fetch from ORM */
  return Promise.resolve({ locale: 'en' });
};

export default async function Page() {
  const project = await getProject();

  return <NextIntlClientProvider locale={project.locale}></NextIntlClientProvider>;
}

Attempt #2

const getProject = async () => {
  /** Fetch from ORM */
  return Promise.resolve({ locale: 'en' });
};

export default async function Page() {
  const project = await getProject();
  const messages = await getMessages({ locale: project.locale });

  // I am using v4 so this is now redundant but still tried it
  return <NextIntlClientProvider locale={project.locale} messages={messages}></NextIntlClientProvider>;
}

In another communication channel you've referred to the upcoming rootParams feature in Next.js. Now that would also work if that function can be called in src/i18n/request.ts retrieving the [id]. That would mean I do my Drizzle ORM call in the src/i18n/request.ts to retrieve the project their. That would also mean I need to efficiently need to cache my Drizzle Query to prevent unnecessary database queries, but that's fine.

However I have my doubts since the request.tsx file lives outside the dynamic segment folder.

[amannn]

// This is where an admin can perform CRUD operations
src/app/admin/projects/[id]/page.tsx

// This is where an visitors can view the project
src/app/view/projects/[id]/page.tsx

That's an interesting structure.

rootParams is intended to solve top-level dynamic segments, so it will work as long as you don't have any ancestor layouts of view/projects/[id]. Is that the case?

Are there other pathnames in the project too?

My initial thought is if you have other pathnames, that you could use a middleware to route to a structure like this:

src/app/[locale]/view/projects/[id]/page.tsx

You could fetch the locale from your database based on the project ID in the middleware and then rewrite to hide the [locale] segment.

So possibly a custom middleware and rootParams (once available) could work for you here I think. In case you only have one route and there are no ancestor layouts, you don't even need the middleware.

The attempts you've shared above should also work, but note that they only provide the locale and messages for Client Components. An approach based on reading rootParams in i18n/request.ts should make it easier to consistently use the same configuration across Server and Client Components.

Does that help?

[amannn]

I'll move this over to a discussion for the time being! I really, really want to get rid of setRequestLocale and would think there are alternative patterns for getting this working that are much more reliable! 😊