using toLocaleString in markup throws checksum error

Here is the problem I have a piece of code inside one of my components: <span>{info.minPrice.toLocaleString('fa')} تومان به بالا </span>

when I run the application I get this error:

Warning: React attempted to reuse markup in a container but the checksum was invalid. 
This generally means that you are using server rendering and the markup generated on 
the server was not what the client was expecting. React injected new markup to compensate
 which works but you have lost many of the benefits of server rendering. Instead, figure out 
why the markup being generated is different on the client or server:
 (client) react-text: 1921 -->۲٬۵۳۴٬۹۰۰<!-- /react
 (server) react-text: 1921 -->2,534,900<!-- /react

nothing else is involved in this problem if I simply remove .toLocaleString function It will work without any errors.

[blistok]

@iamsoorena This is not Next.js related issue. It has to do with Node’s poor internationalization support (node had intl issues since always); so what’s going on in your case is that server side you render number 16: while client side you render ۱۶.

Assuming you are dealing only with Farsi, I think your best bet would be to use persianjs package, and then you can have something like:

import React from 'react';
import persianJs from 'persianjs';

export default () => (
  <div>
    <span>{persianJs('16').englishNumber().toString()}</span>
  </div>
);

[iamsoorena]

Thanks a lot @Blistok .