next-i18next: Servers with custom locales are no longer supported

Describe the bug

As of #1064, next-i18next relies on the Next locale to determine the current language (rather than serverSideTranslations.initialLanguage as before).

Since Next only supports domain- and subpath-based locale handling, this breaks next-i18n for package consumers who implement their own locale support. Ideally, Next would support this use case, but failing that, it’d be excellent for next-i18n to continue to support the workaround removed in #1064.

Occurs in next-i18next version

8.8.0

Steps to reproduce

Pass a custom locale to serverSideTranslations; observe that when renderer server-side, the default locale is used, and when rendered client-side, translations are missing.

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export const Footer = () => {
  const { t, i18n } = useTranslation('footer');
  // i18n.language #=> 'en', but should be 'fr'
  return (
    <footer>
      <p>{t('description')}</p>
    </footer>
  );
};

export async function getStaticProps() {
  return { props: await serverSideTranslations('fr') };
}

Expected behaviour

i18n.language should be French (fr), but it is instead English (en).

Screenshots

N/A

OS (please complete the following information)

Device: MBP 2017 13"
Browser: Firefox 93.0

Additional context

N/A

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

I will be able to get out a v9.0.0 release later this week which addresses this issue. Thanks for your patience, everyone!

isaachinman on Nov 8, 2021

@isaachinman Looking at the code, it seems that passing locale to serverSideTranslations has no effect at the moment. Is it correct? Should this be reflected in the documentation?

This change breaks the page a little bit. Even though we have a list of fallback languages passed to next-i18next.config.js, we had to strip script locale (nl-NL, en-GB) manually and replace it with language locale (nl, en) to make serverSideTranslations work.

const getServerSideTranslations: typeof serverSideTranslations = async (
    initialLocale,
    namespacesRequired,
    configOverride
) => {
    const activeLocale = getActiveLocaleForI18Next(initialLocale);

    return serverSideTranslations(activeLocale, namespacesRequired, configOverride);
};

Hower now to make the serverSideTranslations work, we need to have empty script JSON files because it looks for the default namespace.

It is not a big deal, just empty JSONs, but I would like to know if the change is permanent before I refactor the code.

TheFullResolution on Oct 27, 2021

I just tested it with the swapfiets.com - all works as expected 👍

TheFullResolution on Nov 12, 2021