# Localization in NextJS server side break since 2.0.3

**URL:** <https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589>\
**Category:** Bugs\
**Created:** [September 12, 2022, 4:40pm UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589 "2022-09-12T16:40:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![maythee](https://avatars.discourse-cdn.com/v4/letter/m/f9ae1b/32.png) [@maythee](https://forum.builder.io/u/maythee)\
**Post date:** [September 12, 2022, 4:40pm UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/1 "2022-09-12T16:40:35Z")

</div>

Since [Builder.io](http://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.

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [September 12, 2022, 5:39pm UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/2 "2022-09-12T17:39:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [September 12, 2022, 6:34pm UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/3 "2022-09-12T18:34:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maythee](https://avatars.discourse-cdn.com/v4/letter/m/f9ae1b/32.png) [@maythee](https://forum.builder.io/u/maythee)\
**Post date:** [September 12, 2022, 7:07pm UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/4 "2022-09-12T19:07:08Z")

</div>

Hi @aziz ,

I put the demo code here [GitHub - llun/builder-bug: Sample builder.io code with div in div bug](https://github.com/llun/builder-bug)

and the content for the page is here

> **[Builder.io: Drag and drop Visual CMS](https://builder.io/content/bb63e6743d11422d998e7427d76c7dbe)**
>
> Build and optimize digital experiences for any tech stack, visually.

and the Vercel page is [Create Next App](https://builder-bug.vercel.app/new-page)

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.

---

<div class="post-metadata">

**Author:** ![maythee](https://avatars.discourse-cdn.com/v4/letter/m/f9ae1b/32.png) [@maythee](https://forum.builder.io/u/maythee)\
**Post date:** [September 13, 2022, 7:19am UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/5 "2022-09-13T07:19:05Z")

</div>

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.

 ![Screenshot 2022-09-13 at 09.17.05](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/980d0ab78868249b704c9f8343fa3c03c110ea0a.png)

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

 ![Screenshot 2022-09-13 at 09.18.20](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/a7fa6b0b4060390879c9187d0835ca35f4f4e5b8.png)

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.

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [September 19, 2022, 3:48pm UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/6 "2022-09-19T15:48:36Z")

</div>

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](https://www.builder.io/c/docs/localization-by-block). Since they are different localization methods, that may be why you are seeing two ways to enter localized text.

---

<div class="post-metadata">

**Author:** ![maythee](https://avatars.discourse-cdn.com/v4/letter/m/f9ae1b/32.png) [@maythee](https://forum.builder.io/u/maythee)\
**Post date:** [September 20, 2022, 7:38am UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/7 "2022-09-20T07:38:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [September 20, 2022, 1:25pm UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/8 "2022-09-20T13:25:40Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![maythee](https://avatars.discourse-cdn.com/v4/letter/m/f9ae1b/32.png) [@maythee](https://forum.builder.io/u/maythee)\
**Post date:** [September 20, 2022, 1:47pm UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/9 "2022-09-20T13:47:02Z")

</div>

It’s here. [GitHub - llun/builder-bug: Sample builder.io code with div in div bug](https://github.com/llun/builder-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?

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [September 22, 2022, 7:50pm UTC](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/10 "2022-09-22T19:50:49Z")

</div>

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](https://github.com/BuilderIO/builder/blob/main/examples/next-js-simple/pages/%5B%5B...page%5D%5D.tsx#L51-L52).

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.
