Some i18n configuration options throw warnings in NextJs 12.2.3

[MonstraG]

🐛 Bug Report

Warning example:

warn  - Invalid next.config.js options detected: 
[
  {
    "instancePath": "/i18n",
    "schemaPath": "#/properties/i18n/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "fallbackLng"
    },
    "message": "must NOT have additional properties"
  },
  ...
]

For me this happens with fallbackLng, keySeparator, nsSeparator, localePath, reloadOnPrerender, but I'm assuming it would happen with each property that is not mentioned in I18NConfig, which is

export interface I18NConfig {
    defaultLocale: string;
    domains?: DomainLocale[];
    localeDetection?: false;
    locales: string[];
}

To Reproduce

Update to nextjs 12.2.3, add one of the mentioned properties to i18n section and run build.

Expected behavior

No warnings.

Your Environment

"next": "^12.2.3",
"next-i18next": "^11.3.0",
...
"i18next@npm:^21.8.13":
  version: 21.8.14
  
windows

Folks from nextjs said that the issue is on this end

[adrai]

Based on the types here it should extend the options correctly... How does your config look like? I suspect you're defining the options in the i18n property, but you should define them outside: https://github.com/i18next/next-i18next/blob/master/examples/simple/next-i18next.config.js

I'm not a TypeScript user (maybe @pedrodurek can help?)...

[MonstraG]

Reproducable with
next.config.js:

const { i18n } = require("./next-i18next.config");

module.exports = {
	i18n
};

next-i18next.config.js:

module.exports = {
	i18n: {
		defaultLocale: "en-GB",
		locales: ["en-GB"],
		keySeparator: "."
	}
};

[adrai]

Try:

module.exports = {
	i18n: {
		defaultLocale: "en-GB",
		locales: ["en-GB"]
	},
        keySeparator: "."
};

[MonstraG]

Yep, I am defining them inside. Outside doesn't warn, thanks!

[JunlinPan-Crypto]

Still have the warning in Nextjs v12.2.4

warn  - Invalid next.config.js options detected:
The root value has an unexpected property, returnEmptyString (and fallbackLng) which is not in the list of allowed properties

module.exports = {
	i18n: {
		defaultLocale: "en-GB",
		locales: ["en-GB"]
	},
         fallbackLng: 'en',
         returnEmptyString: false,
};

If I put them inside i18n, then similar warning:

warn  - Invalid next.config.js options detected: 
  - The value at .i18n has an unexpected property, fallbackLng, which is not in the list of allowed properties (defaultLocale, domains, localeDetection, locales).
  - The value at .i18n has an unexpected property, returnEmptyString, which is not in the list of allowed properties (defaultLocale, domains, localeDetection, locales).

Where should I put those i18next configs?

[adrai]

@MonstraG Can you confirm?

[MonstraG]

No, for me everything is ok.

next-i18next.config.js:

const path = require("path");
const languages = require("./i18n.languages.js");

/** @type import("next").I18NConfig */
const i18n = {
	defaultLocale: process.env.DEFAULT_LANGUAGE,
	locales: languages,
	localeDetection: false // disable automatic redirection on the user's preferred locale
};

/** @type import("next-i18next").UserConfig */
const next18nextConfig = {
	i18n,
	fallbackLng: process.env.NEXT_PUBLIC_FALLBACK_LANGUAGE,
	keySeparator: ".",
	nsSeparator: ":",
	localePath: path.resolve("./public/static/locales"),
	reloadOnPrerender: process.env.NODE_ENV === "development"
};

module.exports = next18nextConfig;

next.config.js:

const { i18n } = require("./next-i18next.config");

/** @type import("next").NextConfig */
const config = {
	swcMinify: true,
	optimizeFonts: false,
	compiler: {
		emotion: true
	},
	i18n
};

module.exports = config;

[JunlinPan-Crypto]

Sorry, it was my mistake that I passed all i18next configs to Next . I missed the instruction https://github.com/i18next/next-i18next#passing-other-config-options that only need to import i18n object for Next config.

Thank you for the reminder ❤️