Issue on Next.js Server-Side Rendering Page with using useTranslations in Client-Side components

[egel]

I'm experiencing an issue with the next-intl translation plugin for Next.js, specifically when using client-side components within a server-side rendered (SSR) page.

I have a complex SSR page that renders some elements on the server side. However, I also want to include client-side components, such as a contact component form, which is only rendered on the client side with use client. When using the useTranslations function from next-intl to easily translate these client-side components, it doesn't work as expected.

The issue arises when trying to use useTranslation in the client-side component. The function complains if the string is not having an exact translation text, which suggests that my configuration is correct (following the current docs and setup). However, instead of getting the translated text, I receive the initial translation key strings.

I've tried another approach by rendering the client-side component separately and passing the translation strings from server-side rendering as parameters (like <ContactForm tranlsations={tranlsationsForComponent} />) and this works, but it increases the complexity of building components and doesn't seem like the desired way to reuse them, especially with complex translations for form validation.

My question is: Is it possible to use client-side components with useTranslation in SSR pages? If so, could someone provide an example of how this should be structured?

To give some context, here's a basic outline of my server-side rendering page and how I consume the client-side component:

• Nextjs: 15.4.2

• Intl-next: 4.3.4

• server-side component (the main page)

import { useTranslations } from 'next-intl';

export default async function Home({ params }: never) {
  const { locale } = await params;
  const t = await getTranslations({ locale });
  setRequestLocale(locale);

  return (
    <div>
      <h1>t('homePage.contactForm')</h1> // this translations works perfectly fine
      {/* Server-side rendered elements */}
      <ContactForm />
    </div>
  );
};

• client-side form component (FYI, I simplified the form to mostly use strings instead reusable variables/interfaces, and leave just one form field)

'use client';

import { yupResolver } from '@hookform/resolvers/yup';
import { useTranslations } from 'next-intl';
import { useForm } from 'react-hook-form';
import * as Yup from 'yup';

export interface ContactFormDto {
  name: string;
}

export const ContactForm = () => {
  const tComponent = useTranslations('components.organisms.contactForm');
  const tValidation = useTranslations('validationMessages');

  // Using t() (here as tComponent or tValidation) function to get translated strings from desired namespace, 
  // but this is not working and returns instead of translating text based on keys it just key strings

  const formValidationSchema: Yup.ObjectSchema<ContactFormDto> = Yup.object().shape({
    name: Yup.string()
      .trim()
      .required(tValidation('fieldRequired'))
      .min(3, tValidation('fieldMustHaveMinCharacters', { number: 3 })),
  });

  const { register, handleSubmit } = useForm({
    resolver: yupResolver(formValidationSchema),
    mode: 'onSubmit',
  });

  const formSubmitHandler = () => {
    console.log('form sent!');
  };

  return (
    <form onSubmit={handleSubmit(formSubmitHandler)} noValidate>
      {/* Form fields */}
      <label htmlFor={'name'}>{tComponent('nameLabel')}</label>
      <input id={'name'} type='text' {...register('name')} />

      <button type='submit'>tComponent('buttonSend')</button>
    </form>
  );
};

• and a very trivial translation file to complete the picture

{
  "homePage": {
    "contactForm": "Contact Form"
  },
  "components": {
    "organisms": {
      "contactForm": {
        "nameLabel": "Name",
        "buttonSend": "Send"
      }
    }
  },
  "validationMessages": {
    "fieldRequired": "This field is required",
    "fieldMustHaveMinCharacters": "Minumum {number} characters are required"
  }
}

Any help or guidance on how to properly configure this would be greatly appreciated!

[amannn]

Have you set up NextIntlClientProvider correctly?