14

I'm trying to make my default language in Next.js i18n but always is getting "En" as default language called like fallback.

And I also get this error:

Error: [@formatjs/intl Error MISSING_DATA] Missing locale data for locale: "sq" in Intl.NumberFormat. Using default locale: "en" as fallback

module.exports = {
    i18n: {
        locales: ['sq', 'en'],
        defaultLocale: "sq",
    }
}
juliomalves
  • 42,130
  • 20
  • 150
  • 146
Riks
  • 165
  • 1
  • 5

1 Answers1

30

Next.js will automatically detect which locale the user prefers based on the Accept-Language header sent in the page request.

In your case, although your default locale is sq, the en locale is detected in the Accept-Language header so you get redirected to the locale-prefixed path.

This behaviour can be disabled by setting localeDetection to false in your i18n options.

// next.config.js

module.exports = {
    i18n: {
        locales: ['sq', 'en'],
        defaultLocale: 'sq',
        localeDetection: false
    }
}

From the Disabling Automatic Locale Detection documentation:

When localeDetection is set to false Next.js will no longer automatically redirect based on the user's preferred locale and will only provide locale information detected from either the locale based domain or locale path as described above.

As a side note, regarding the @formatjs/intl error, it indicates that you're using an environment/browser that doesn't have support for the sq locale. You may want to look into @formatjs/intl-numberformat to polyfill that locale data.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
  • For the formatjs/intl i found this code but didn't work : import '@formatjs/intl-datetimeformat/polyfill-force’ // Using force to use our polyfill import '@formatjs/intl-datetimeformat/locale-data/kk’ // Add locales you want import '@formatjs/intl-datetimeformat/locale-data/ru’ // Add locales you want import '@formatjs/intl-datetimeformat/add-all-tz' // Add ALL tz data – Riks Mar 22 '21 at 11:42
  • Did you literally copy that? You'll want to add the locale you need: `sq`. – juliomalves Mar 22 '21 at 11:49
  • 1
    Yeah i added /sq but same result again, should i put this piece of code in file: _app.js or? – Riks Mar 22 '21 at 11:57
  • My code: import '@formatjs/intl-datetimeformat/polyfill-force' // Using force to use our polyfill import '@formatjs/intl-datetimeformat/locale-data/sq' // Add locales you want import '@formatjs/intl-datetimeformat/add-all-tz' // Add ALL tz data – Riks Mar 22 '21 at 11:59
  • I just realised I might have linked the wrong polyfill. Try [`@formatjs/intl-numberformat`](https://formatjs.io/docs/polyfills/intl-numberformat), as the error is with `Intl.NumberFormat`. Updated my answer. – juliomalves Mar 22 '21 at 12:00