How does next-intl use the request context of the next app?

[samuelreichor]

Hey,
I'm currently doing a deep dive into react request context and building my own library that uses data of the request context. I stumbled across this awesome approach but can't wrap my head around it. Maybe someone can explain me the pattern that next-intl uses to do so.

@amannn By the way I'm also from Austria :D If you want to drink a coffee (or beer) feel free to reach out!

[amannn]

Hey, glad to hear that you like it! 😊

There's a bit of technical background on how the RSC integration works in the docs.

The general problem is that RSC doesn't support passing context along during rendering. To work around this, next-intl registers an alias that allows to inject user-specified config in all relevant places:

next-intl/packages/next-intl/src/plugin/getNextConfig.tsx

Line 76 in 44f07b2

'next-intl/config': resolveI18nPath(pluginConfig.requestConfig)

Another topic is that a top-level segment like the locale can currently not be read in Server Components. To work around this, the locale is passed as a request header to components:

next-intl/packages/next-intl/src/shared/constants.tsx

Line 2 in 44f07b2

export const HEADER_LOCALE_NAME = 'X-NEXT-INTL-LOCALE';

But luckily, this is going to change in the future: vercel/next.js#80255

So cool that you're from Austria too! 🤜 🤛

[samuelreichor]

Thank you for the great response and the brilliant suggestions. These workarounds are genius!

Maybe it's just me but it's kinda nuts that doing such a simple thing is so complicated in next.. 😅 I'm maintaining a lib for nuxt and there you simply have the context everywhere.. 🥲

My first try was to use a middleware in the next app and set some headers as global state. Then I thought I can read these headers in the library when I call the function in the right context. This is indeed not the case. When I move all the code from the library in the same next app, it works as expected. Do you know why this behaves differently?

[amannn]

Haha yes, Next.js is definitely quite on the restrictive side here 🙈. At least for i18n solutions it will get easier with next/root-params though.

Do you know why this behaves differently?

Hmm no, unfortunately not, sorry. next-intl uses this pattern and I haven't seen an issue with it.

What is your practical use case?