useLocale and useTranslations not updating in client components #1813

the-content · 2025-03-26T07:52:05Z

the-content
Mar 26, 2025

next-intl version: 4.0.2
next version: 15.2.4

When I deleted "use client" in /app/[locale]/page.jsx, the translation in page.jsx worked, but there was no change in my language. I didn't have these problems in another project. I compared it for a long time and couldn't figure out what was different from my previous code. It seemed to be the same. I copied and pasted it.

app/[locale]/page.jsx

'use client'
import { Language } from '@/components/language'
import { useLocale, useTranslations } from 'next-intl'

export default function Home() {
    const locale = useLocale()
    const t = useTranslations()
    return (
        <div>
            <h1>`app/[locale]/page.jsx`</h1>
            <p>useLocale() : {locale}</p>
            <p>Translations : {t('title')}</p>
            <hr className="my-4" />
            <Language />
        </div>
    )
}

Language component:
/components/language.jsx

'use client'
import React from 'react'
import { useLocale, useTranslations } from 'next-intl'
import { languages } from '@/i18n/config'
import { Link, usePathname } from '@/i18n/routing'

export const Language = () => {
    const t = useTranslations()
    const locale = useLocale()
    const pathname = usePathname()
    return (
        <React.Fragment>
            <p>`components/language.jsx`</p>
            <div className="flex gap-x-4">
                <p>useLocale() : {locale}</p>
            </div>
            <div className="flex gap-x-4">
                <p>Translation : {t('title')}</p>
            </div>
            <div>
                <span>Language List:</span>
                <div className="flex gap-x-4">
                    {languages.map((lang, index) => (
                        <Link href={{ pathname: pathname }} locale={lang.code} replace key={index} className="underline">
                            {lang.label}
                        </Link>
                    ))}
                </div>
            </div>
        </React.Fragment>
    )
}

/app/layout.jsx

import './globals.css'
import { getMessages } from 'next-intl/server'
import { NextIntlClientProvider } from 'next-intl'

export default async function RootLayout({ children, params }) {
    const { locale } = await params
    const messages = await getMessages()
    return (
        <html lang={locale}>
            <body>
                <NextIntlClientProvider messages={messages} locale={locale}>
                    {children}
                </NextIntlClientProvider>
            </body>
        </html>
    )
}

the-content · 2025-03-26T10:01:47Z

the-content
Mar 26, 2025
Author

Solved

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

useLocale and useTranslations not updating in client components #1813

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

useLocale and useTranslations not updating in client components #1813

Uh oh!

the-content Mar 26, 2025

Replies: 1 comment

Uh oh!

the-content Mar 26, 2025 Author

the-content
Mar 26, 2025

the-content
Mar 26, 2025
Author