Server Side formatting

[programm-ingovals]

Is the Formatter not available server side?

How does hydration work here? Is the server side rendering using Intl.Formatter ?

Taking a look at this issue f.e.
1708

Hydration is failing on Chrome when using format on the client side.

Icelandic has the same issue, is-IS just isn´t supported in Chromium and making a ticket is not a good suggestions since one has existed for a decade and nothing happens.
This is one of the main reasons I reach for a library like Next-Intl. There might be a translation plan as well, but formatting numbers and dates is the main issue.

So what is going on here server side?

[amannn]

next-intl relies on native JavaScript APIs like Intl.DateTimeFormat both when called on the server or the client side.

In the thread you've linked to, there's some relevant information here: #1708 (comment)

If the issue appears because of a browser bug, potentially another option for you could be to either find a locale config that avoids the issue or if it's an option, ensure that the formatting only runs in RSC.

There's also more on this here: Reliable date formatting in Next.js

[programm-ingovals]

In my case it is actually number formatting, which Chrome can´t get correct for Icelandic (well dates as well).

I was hoping that the Next-Intl formatter was a beast of its own that would get consistent results.
I guess its purpose is more to auto inject locale into Intl.NumberFormatting.

SupressHydrationWarning seems to work for me becuase even though this is a client component a mismatch seems to prefer the server side version.

      <span className="text-sm text-muted-foreground" suppressHydrationWarning>
        {format.number(amount * (percentage / 100), {
          style: 'currency',
          currency: 'ISK',
        })}
      </span>

So the options I can think of

• Polyfill is-IS support
• Ensure Node has is-IS support and use SuppressHydrationWarning
• Use a different library for formatting with built in locale support
• Create a custom formatting rule ( can I tie that in with is-IS locale in NEXT-INTL? )
• Redirect all chromium users to the Firefox install site (preferred solution IMO)

[amannn]

I guess its purpose is more to auto inject locale into Intl.NumberFormatting

Yes, for formatting of dates, numbers etc. next-intl tries to not reinvent the wheel, but piggybacks on what is natively available (like e.g. modern date libraries like luxon do).

SupressHydrationWarning seems to work for me

True, that could work as well. But note that if you use number formatting on the client side only (e.g. after calling useState), you'll still rely on the native APIs in the browser.

Polyfill is-IS support

You could try using one from Format.JS: Intl.NumberFormat

[programm-ingovals]

I´m not successful in using FormatJs

In next.js I have tried this in instrumentation-client.ts

import '@formatjs/intl-datetimeformat/polyfill'
import '@formatjs/intl-datetimeformat/locale-data/is'
import '@formatjs/intl-datetimeformat/add-all-tz'

But this always failed because of

if (Intl.DateTimeFormat && typeof Intl.DateTimeFormat.__addLocaleData === 'function') {
  Intl.DateTimeFormat.__addLocaleData({

__addLocaleData was never present.

If I do this however it works

delete (Intl as any).DateTimeFormat

require('@formatjs/intl-datetimeformat/polyfill')
require('@formatjs/intl-datetimeformat/add-golden-tz')
require('@formatjs/intl-datetimeformat/locale-data/is')

[programm-ingovals]

I cannot get this to work at all.

The issue is Icelandic locale and Chromium browsers which are the biggest part of the userbase for the current app.

Polyfilling via CDN provided libraries do not work. They incorrectly say no polyfill is needed.

in theory this code might work

import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill';

export async function polyfillIntl(locale: string) {
  const unsupportedLocale = shouldPolyfill(locale);

  // This locale is supported
  if (!unsupportedLocale) {
    return;
  }

  try {
    // Load the polyfill 1st BEFORE loading data
    await import('@formatjs/intl-numberformat/polyfill-force');
    await import(`@formatjs/intl-numberformat/locale-data/${unsupportedLocale}`);
    await import('@formatjs/intl-datetimeformat/polyfill-force');

    // Parallelize CLDR data loading
    const dataPolyfills = [
      import('@formatjs/intl-datetimeformat/add-all-tz'),
      import(`@formatjs/intl-datetimeformat/locale-data/${unsupportedLocale}`),
    ];
    await Promise.all(dataPolyfills);

    console.log(`Intl polyfills loaded for locale: ${unsupportedLocale}`);
  } catch (error) {
    console.error('Failed to load Intl polyfills:', error);
  }
}

But how to run this on the clientside of a Nextjs application before rendering essentially to ensure no issue.

[amannn]

Maybe instrumentation-client.js?