Next-i18next: How to work with zones(assetPrefix) in next.js

[MichaelIT]

I am working with a next.js app as zone.
Next.js doc about zone: https://nextjs.org/docs/#how-to-define-a-zone.

and my next.config.js file:

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  // You may only need to add assetPrefix in the production.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : '/zoneA'
}

Everything work fine without this package, and my next.js app url is http://mydomian.com/zoneA/ .
There are some errors in my chrome console after I add this package.
The browser can not fetch the resource http://mydomain.com/static/locales/en/common.json.
But I expect the resource url should be http://mydomain.com/zoneA/static/locales/en/common.json.

How can I resolve this problem.

[isaachinman]

Hi @MichaelIT. That's interesting, I hadn't heard of this "zones" feature. Basically you mean that you're running your whole app on a subpath?

If that's the case, you'll need to change config. localePath. Please refer to the docs.

[MichaelIT]

emmm...., i figure it out, actually, it is not the config.localPath to solve this issue.It is config.backend.
As my understand,

config.localPath is used to tell next.js backend server where to find the translation resource.
config.backend is used to tell browser where to find the translation resource.

In my case,
My project structure are:

--i18n.js
--static
----locales
package.json
next.config.js

i18n.js

const NextI18Next = require('next-i18next')
const options = {
  localePath: 'app/static/locales',
  backend: {
    loadPath: '/zoneA/static/locales/{{lng}}/{{ns}}.json',
    addPath: '/zoneA/static/locales/{{lng}}/{{ns}}.missing.json'
  }
}
module.exports = new NextI18Next(options)

next.config.js

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  // You may only need to add assetPrefix in the production.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : '/zoneA'
}

@isaachinman

[isaachinman]

Ah yes, that sounds correct. Glad you figured it out.

[Sletheren]

@isaachinman @MichaelIT Similar issue but in my case the assetPrefix is dynamic, since the APP is served from different URLs example: https://domain/regionA/app/, https://domain/regionB/site1/app/ ...etc? so depending on the URL we extract the assetPrefix and now we get a 404 when trying to retrieve common.json since it's i18next is looking to the wrong path. Any directions?