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

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.

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],
}