i18next properties dont seem to do anything (nonExplicitSupportedLngs does not redirect to closest locale)

[MauriceNino]

Describe the bug

I want to support sub-locales. So for example, if someone calls my website with Accept-Language: de-DE, then de should be loaded.

For this, there seems to be the property nonExplicitSupportedLngs in i18next. I tried adding it to the config, but it is being ignored.

// next-i18next.config.js
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de']
  },
  fallbackLng: 'en',
  supportedLngs: ['en', 'de'],
  nonExplicitSupportedLngs: true,
  load: 'all',
  reloadOnPrerender: !isProd
};

Occurs in next-i18next version

v8.7.0

Steps to reproduce

This commit on my repository has the "bug": MauriceNino/portfolio@792997f

You can also send a GET request against the live version:

# Does not work
GET mauz.io HTTP/1.1
Accept-Language: de-DE

###

# Works
GET mauz.io HTTP/1.1
Accept-Language: de

[isaachinman]

All handling of locales is done by NextJs directly. If you want de-DE to fallback to de, you will need to investigate how to make that happen via NextJs itself. Good luck!

[MauriceNino]

What are the i18next properties for, then? Do I even pass them at the correct position? @isaachinman

[isaachinman]

The i18next properties all work as normal, with the caveat that NextJs dictates the current locale, as it handles internationalised routing. Hope that makes sense.

[MauriceNino]

Makes sense. Can I somehow implement a custom language detection function? Seems like it was possible with older versions of this library (#208).

If not, are there any plans on supporting that again?

Thanks a lot for taking your time for me!

[isaachinman]

Can I somehow implement a custom language detection function?

Not at the moment, to my knowledge.

Seems like it was possible with older versions of this library

Yes, that's correct. Previously, next-i18next handled all aspects of localisation, including detection and routing. The Vercel team's ultimate goal is to support internationalisation first class, completely, but they decided to start with just the detection + routing aspect.

Therefore, any detection or routing concerns should be forwarded to the NextJs repo.

[MauriceNino]

Understood, thanks a lot!

[MauriceNino]

As a quick update, in case anyone stumbles upon this issue later on, I solved it using next's getServerSideProps, like in the following snippet: https://gist.github.com/MauriceNino/bcb3d7361148153c4c7da84ffe128d39

Your implementation may vary, but it should essentially boil down to something like this:

export const getServerSideProps: GetServerSideProps = async ({
  req,
  locale,
  locales
}) => {
  // Read the accepted locales from the headers
  const acceptedLanguages = req.headers['accept-language'];
  const acceptedLocales = getLocales(acceptedLanguages);

  // Find matching locale/language from the available locales
  const foundLocales = getMatchingLocales(acceptedLocales, locales!);

  if (foundLocales.length !== 0 && foundLocales[0] !== locale) {
    return {
      redirect: {
        permanent: false,
        destination: `/${foundLocales[0]}`
      }
    };
  }

  return {
    props: {
      ...(await serverSideTranslations(locale!, ['common']))
    }
  };
};

[yoangau]

I am going to add two notes to @MauriceNino last comment to help people who stumbles on this problem.

• If you happen to use Vercel as a platform, you might fall into a problem where all your pages are now 404 even if it works in local and the build didn't have any errors (see Can't find i18n folder when deploying via @zeit/Now #462 ). If you go in serverless functions you will see the error, but you need to explicitly specify localePath:

// next-i18next.config.js
const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
    nonExplicitSupportedLngs: true,
    localePath: path.resolve('./public/locales'),
  },
};

• The last point is more of a trick than anything else, you define your getServerSideProps function in one place and use it in every page you want:

// helpers/localisation.ts
export const getServerSideProps: GetServerSideProps = async ({ req, locale, locales }) => {
  ...
};

// All pages except for 404
import { getServerSideProps } from 'helpers/localisation';
...
export { getServerSideProps };
export default CurrentPage;