The next-i18next don't bring the data from an endpoint - next.js

Question

In a Nextjs project using next-i18next, I'm trying to read language json file from a cms but my configuration is not working.
This is my 'next-i18next.config.js':
const I18NextHttpBackend = require('i18next-http-backend/cjs');
module.exports = {
debug: process.env.NODE_ENV === 'development',
reloadOnPrerender: process.env.NODE_ENV === 'development',
i18n: {
defaultLocale: 'es',
locales: ['es'],
localeDetection: false,
},
ns: ['translation'],
defaultNS: 'translation',
react: {
useSuspense: true,
},
backend: {
loadPath: 'http://localhost:3001/locales/{{lng}}/{{ns}}.json',
requestOptions: {
cache: 'default',
credentials: 'same-origin',
mode: 'no-cors',
},
},
serializeConfig: false,
use: isBrowser ? [I18NextHttpBackend] : [],
}
I'm following the examples that I found in the official repository of the next-i18next and in the i18next-http-backend next example.
The endpoint has an object like:
{"title": "My title"}
This is the debug:
{
"debug": true,
"initImmediate": true,
"ns": [
"translation"
],
"defaultNS": "translation",
"fallbackLng": [
"es"
],
"fallbackNS": false,
"supportedLngs": false,
"nonExplicitSupportedLngs": false,
"load": "currentOnly",
"preload": false,
"simplifyPluralSuffix": true,
"keySeparator": ".",
"nsSeparator": ":",
"pluralSeparator": "_",
"contextSeparator": "_",
"partialBundledLanguages": false,
"saveMissing": false,
"updateMissing": false,
"saveMissingTo": "fallback",
"saveMissingPlurals": true,
"missingKeyHandler": false,
"missingInterpolationHandler": false,
"postProcess": false,
"postProcessPassResolved": false,
"returnNull": true,
"returnEmptyString": true,
"returnObjects": false,
"joinArrays": false,
"returnedObjectHandler": false,
"parseMissingKeyHandler": false,
"appendNamespaceToMissingKey": false,
"appendNamespaceToCIMode": false,
"interpolation": {
"escapeValue": false,
"prefix": "{{",
"suffix": "}}",
"formatSeparator": ",",
"unescapePrefix": "-",
"nestingPrefix": "$t(",
"nestingSuffix": ")",
"nestingOptionsSeparator": ",",
"maxReplaces": 1000,
"skipOnVariables": true
},
"errorStackTraceLimit": 0,
"localeExtension": "json",
"localePath": "./public/locales",
"localeStructure": "{{lng}}/{{ns}}",
"react": {
"useSuspense": true
},
"reloadOnPrerender": true,
"serializeConfig": false,
"use": [
null
],
"backend": {
"loadPath": "http://localhost:3001/locales/{{lng}}/{{ns}}.json",
"requestOptions": {
"cache": "default",
"credentials": "same-origin",
"mode": "no-cors"
},
"addPath": "/locales/add/{{lng}}/{{ns}}",
"allowMultiLoading": false,
"reloadInterval": false,
"customHeaders": {},
"queryStringParams": {},
"crossDomain": false,
"withCredentials": false,
"overrideMimeType": false
},
"lng": "es",
"defaultLocale": "es",
"locales": [
"es"
],
"localeDetection": false,
"resources": {
"es": {
"translation": {}
},
"en": {
"translation": {}
},
"ca": {
"translation": {}
}
},
"ignoreJSONStructure": true
}
Thanks.

Answer 1

If you want to use always your custom loadPath (client and server side), you need to do this:
module.exports = {
debug: process.env.NODE_ENV === 'development',
reloadOnPrerender: process.env.NODE_ENV === 'development',
i18n: {
defaultLocale: 'es',
locales: ['es', 'en'],
localeDetection: false,
},
ns: ['translation'],
defaultNS: 'translation',
react: {
useSuspense: true,
},
backend: {
loadPath: 'http://localhost:3000/api/{{ns}}/{{lng}}',
requestOptions: {
cache: 'default',
credentials: 'same-origin',
mode: 'no-cors',
}
},
serializeConfig: false,
use: [I18NextHttpBackend],
}

Answer 2

You need to also conditionally set the backend options:
module.exports = {
debug: process.env.NODE_ENV === 'development',
reloadOnPrerender: process.env.NODE_ENV === 'development',
i18n: {
defaultLocale: 'es',
locales: ['es', 'en'],
localeDetection: false,
},
ns: ['translation'],
defaultNS: 'translation',
backend: isBrowser ? {
loadPath: 'http://localhost:3000/locales/{{lng}}/{{ns}}.json',
requestOptions: {
cache: 'default',
credentials: 'same-origin',
mode: 'no-cors',
},
} : undefined,
serializeConfig: false,
use: isBrowser ? [I18NextHttpBackend] : [],
}