How to prevent exposing all translations to the client in App Router with next-intl #1847
Comments
|
By default export const getClientMessages = cache(async () => (await import('@/i18n/en.client.json')).default)
// ...
export default async function Layout({ children }: { children: ReactNode }) {
// ...
const messages = await getClientMessages()
return (
<html lang={locale}>
<body>
<Providers messages={messages} locale={locale}>
{children}
</Providers>
</body>
</html>
)
}
// ...
export function Providers({
children,
messages,
locale,
}: {
children: ReactNode
messages: AbstractIntlMessages
locale: string
}) {
return (
<NextIntlClientProvider messages={messages} locale={locale}>
{children}
</NextIntlClientProvider>
)
}My request config for export default getRequestConfig(async () => {
const locale = 'en'
return {
locale,
messages: {
...(await import('@/i18n/en.client.json')).default,
...(await import('@/i18n/en.server.json')).default,
},
}
}) |
Maybe there is a way to remove the script from the source code containing the translation as in the example https://next-intl-example-app-router-without-i18n-routing.vercel.app/login if "View page source" then there will be the following script containing the translation data:
|
|
Yep, @ChristianIvicevic is right—you can currently achieve this by manually choosing which The eventual solution I'd like to arrive at here is #1. |
|
This issue has been automatically closed because there was no recent activity and it was marked as unconfirmed. Note that issues are regularly checked and if they remain in unconfirmed state, they might miss information required to be actionable or are potentially out-of-scope. If you'd like to discuss this topic further, feel free to open a discussion instead. |
Description
When using [email protected] with Next.js 15.2.5 and App Router, I noticed that all translations (including admin-only namespaces) are exposed in the client-rendered page, even if only one namespace is used.
This could be a security or privacy concern in cases where admin or restricted strings are included in translation files, but still visible to unauthorized users who inspect the client source.
Verifications
Mandatory reproduction URL
https://github.com/amannn/next-intl-bug-repro-app-router
Reproduction description
Steps to reproduce:
Set up [email protected] with App Router in Next.js 15
Place all translations into a single file (e.g. ru.json) like this:
{
"General": {
"hello": "Привет"
},
"Admin": {
"ban": "Забанить"
}
}
Use only "General" namespace on the home page via const t = useTranslations("General")
Visit the homepage and inspect the generated HTML or client-rendered JS
🔍 All translation data, including "Admin", is still visible in the serialized page data, even though it is never used.
Expected behaviour
Only the used namespace (e.g. "General") should be included in the client bundle or serialized page data. Other unused namespaces (e.g. "Admin") should not be exposed unless explicitly requested.
The text was updated successfully, but these errors were encountered: