So I've recently migrated a website from React to NextJs and the website is active in Sweden and Norway with the URLs; domain.com/se and domain.com/no
When we migrated the website we thought it was a good idea to use se and no as locales.
(next-18next.config.js)
module.exports = {
// https://www.i18next.com/overview/configuration-options#logging
debug: false, //process.env.NODE_ENV === 'development',
i18n: {
defaultLocale: 'default',
locales: ['default', 'se', 'no'],
},
localePath: path.resolve('./public/locales'),
localeDetection: false,
reloadOnPrerender: process.env.NODE_ENV === 'development',
};
It has worked out very good until now when we realized that Next automatically sets lang tag on the <html> tag on the page to se or no, but we want sv or nb.
And we haven't found a way to override Next.
We've tried to set the lang tag in _document.tsx like this:
<Html lang="sv">...</Html>
But it only works on the first render(on the server) and then Next overrides this value and sets it to se. This means that in the HTML-file that the server returns we get the correct value <html lang="sv">...</html>, but then on the client side Next sets it to se.
Do you know any way to stop Next from overriding our value or do we need to change the locales to sv and nb and use domain routing or another approach?