Localization in NextJS server side break since 2.0.3

Since Builder.io sdk react 2.0.3, BuilderComponent doesn’t pass in the localization properties for the custom component. It gives undefined values which used to be translation base on locale set to BuilderComponent

Detailed steps to reproduce the bug

  1. Add custom component into the page and set one of the value with localization text
  2. Use NextJS to render the page
  3. When it renders in browser, content will be mismatch because on server side, component get undefined text but in the browser, BuilderComponent renders component with translation text.

Hi @maythee , thanks for reporting this, do you mind sharing a codesandbox or a repo we can use for reproduction?

We’ve recently added locale prop support to the react sdk please use @builder.io/react@2.0.5 or above, I also recoreded a video to demo localizing custom components inputs using the new prop:

Please let me know if you have any questions

1 Like

Hi @aziz ,

I put the demo code here GitHub - llun/builder-bug: Sample builder.io code with div in div bug

and the content for the page is here

and the Vercel page is Create Next App

I updated the sdk to the latest version and passed the locale value to BuilderComponent in this case Default but in the NextJS server side, all localization properties are still undefined however, in the browser, the values that pass to the component are correct.

Hi @aziv,

I also just realised that now Builder has two ways to enter localisation text. We used to use Localize Text from the popup below to enter localisation.

However, now when I set localized: true in the input, Builder shows this localisation box as an option instead.

I updated the page to use the new one, the problem is still happened but now I’m not sure what is the right way to enter the localization text too.

Hi @maythee, it looks like from my end with the new updates you should see the “Block Options” for localized custom components and the “Localize Text” option for inline field level localization. Since they are different localization methods, that may be why you are seeing two ways to enter localized text.

Thanks @ancheetah for the guide, do you know which one should we use? or what’s the prefer way? also both way doesn’t seem to fix the server side render in NextJS, I still get blank property when generate static page from server side.

@maythee you would use either one or the other depending on the case since they are for different localization methods. You shouldn’t have the option to choose from both for a single component. Can you please share a Github or Codesandbox that minimally reproduces the server side mismatch? I am not having this issue in my setup. Thanks!

It’s here. GitHub - llun/builder-bug: Sample builder.io code with div in div bug

I think I found the issue, most of our custom components are build and use with translations from the Input that is not flag as localized before. We have these components live, anyway to make it works with new localized input?

Hi @maythee , as for the hydration mismatch this should be resolved if you use our new useIsPreviewing hook which you can see an example of here.

As for the localized components, I don’t believe there is currently a way once you’ve updated to the latest SDK version since the return type is different now.