Cannot use default translation values using Next's app folder structure

[peterbrczan]

Description

Hello there!

My issue is, that when I try to provide some default values for formatting the rich texts, like:

<NextIntlClientProvider
  locale={params.locale}
  messages={messages}
  defaultTranslationValues={{
    // This function breaks the app
    highlight: (text) => <strong>{text}</strong>,
  }}
>
  {children}
</NextIntlClientProvider>

then I got that error:

Error: Functions cannot be passed directly to Client Components because they're not serializable.

Is this issue might have been resolved already using the next-intl@2.11.0-beta.4 version?

Reproduction URL (CodeSandbox)

https://codesandbox.io/p/sandbox/next-intl-bug-template-forked-6jfg9x?file=%2Fsrc%2Fapp%2F%5Blocale%5D%2Flayout.tsx&selection=%5B%7B%22endColumn%22%3A38%2C%22endLineNumber%22%3A30%2C%22startColumn%22%3A38%2C%22startLineNumber%22%3A30%7D%5D

Reproduction description

1. Migrate to NextJS's app folder.
2. Set up next-intl based on the documentation..
3. Create some rich text translations.
4. Try to pass some value to the defaultTranslationValues prop of the NextIntlClientProvider component.
5. The app's gonna crash

Expected behaviour

The app should not crash because of this, instead it should render the rich text message. If that's not possible because the nature of the server components, then it should provide a fallback value or remove this props and it's type declarations when using the app folder structure.

[amannn]

Hey @peterbrczan,

thanks for the report! That's an expected error, React can not serialize functions like defaultTranslationValues when you pass them to a Client Component.

The fix is to create a Client Component where the prop is defined. Have a look at this fixed version of your CodeSandbox.

I'm not sure yet how much information next-intl needs to provide in regards to this, as this is a general Next.js/React topic. Next.js already has a small section in regards to this. Furthermore with the Server Components integration I think there'll be less need for this pattern.

Let me know if this helps!

[peterbrczan]

Hi @amannn

Thanks for your quick and detailed response, and furthermore for putting effort to extend the CodeSandbox example!

You answered and helped me a lot :)