Next-i18next: defaultLanguage not working

[ScottAgirs]

Environment:

I have my backend (server) and frontend (client) on separate servers.
Therefore I have omitted the server config on Nextjs app and set up i18n without it.

When I console log t() from { withNameSpaces } from:

const NextI18Next = require('next-i18next/dist/commonjs');

module.exports = new NextI18Next({
  defaultNS: 'common',
  defaultLanguage: 'en',
  otherLanguages: ['fr', 'ru', 'lv'],
  localeSubpaths: 'none'
});

the lngs field is null

As seen above, I have defined defaultLanguage, however, it is not being applied.
If the lang is manipulated via i18n.changeLanguage( 'en') the translations are applied just fine.
Switching between languages also is not a problem, however, in either case the lngs field remains null.

[joeyzone]

https://github.com/isaachinman/next-i18next/issues/269
the same

[ScottAgirs]

269

the same

not the same #269 says other than 'en', in my case it's null - i.e. not loading at all.

[isaachinman]

I have my backend (server) and frontend (client) on separate servers

Can you explain what this means? How are you doing SSR?

[ScottAgirs]

I have my backend (server) and frontend (client) on separate servers

Can you explain what this means? How are you doing SSR?

Hey Isaac, thanks for replying!

I have NodeJS server in a folder that I deploy to (example - Heroku) and NextJS in another folder that I deploy to (example Zeit Now) - so 2 separate folders

EDIT:
Just noticed this line
https://github.com/isaachinman/next-i18next/blob/5dcdf7d9d40205bb3aafa53aaba4f4d201ced8f5/examples/simple/server.js#L15
So would this mean that if I have the client and server separated I would have to initiate another server on the frontend? If so, are there any good examples I could get inspiration from?

[isaachinman]

NodeJS server in a folder [...] NextJS in another folder

Not sure I'm understanding what you mean. All we care about here is the NextJs process, which _is itself_ a NodeJs process. The process which serves your NextJs routes via Express is the process which must also use the nextI18NextMiddleware.

I think perhaps you are confusing the idea of "client" and "server" separation. The simple example in this repo provides a good outline for how to approach setup.

Let me know if you have any other questions.

[ScottAgirs]

NodeJS server in a folder [...] NextJS in another folder

Not sure I'm understanding what you mean. All we care about here is the NextJs process, which _is itself_ a NodeJs process. The process which serves your NextJs routes via Express is the process which must also use the nextI18NextMiddleware.

I think perhaps you are confusing the idea of "client" and "server" separation. The simple example in this repo provides a good outline for how to approach setup.

Let me know if you have any other questions.

For now I only have the same, initial, question, which is not answered.. :) I have not set up NodeJS process on my front-end app. I'm running NodeJS process on the backend of the app, I use NextJS exclusively for the front-end.

In other words, I am not dealing with neither Express nor NodeJS within the repo of where my NextJS app is.

Here is a brief illustration of the structure:

Frontend

/FolderApple
└── NextJS App
     ├── /pages
     ├── /static
          ├── en
          |  └── common.json
          └── ru
             └── common.json
     ├── i18n.js    // 1)
     ├── config.js // 2)
     └── index.js

1) contains https://github.com/isaachinman/next-i18next/blob/5dcdf7d9d40205bb3aafa53aaba4f4d201ced8f5/examples/simple/i18n.js#L1-L8

2) contains the endpoint URL to feed into Apollo Client

Backend

/FolderBanana
└── NodeJS App
     ├── /src
          ├── resolvers
          └── etc
     └── index.js // all server stuff - Express, CreateGraphQLServer etc.

So:

• FolderApple does not deal with any server stuff at all

• FolderBanana deals with server stuff only

I then connect the two with an endpoint.

So my question better formed would be - do I have to create a NodeJS process with Express on my FolderApple in order for this to work or is there another way?

[isaachinman]

In other words, I am not dealing with neither Express nor NodeJS within the repo of where my NextJS app is.

You will need to create a custom Node/Express server within your NextJs app as clearly stated in the docs. I also wrote a walkthrough article which you can find here.

[ScottAgirs]

In other words, I am not dealing with neither Express nor NodeJS within the repo of where my NextJS app is.

You will need to create a custom Node/Express server within your NextJs app as clearly stated in the docs. I also wrote a walkthrough article which you can find here.

Okay, thank you will give it a go.

[ahmedengu]

I was able to resolve this issue by removing 'header' from detectors by adding the following to my config to override the default detectors:

detection: {
    lookupCookie: 'next-i18next',
    order: ['cookie', 'querystring', 'localStorage', 'path', 'subdomain'],
    caches: ['cookie'],
  },

so the set up would be:

import NextI18Next from 'next-i18next'

const NextI18NextInstance = new NextI18Next({
  defaultLanguage: 'ar',
  otherLanguages: ['de'],
  detection: {
    lookupCookie: 'next-i18next',
    order: ['cookie', 'querystring', 'localStorage', 'path', 'subdomain'],
    caches: ['cookie'],
  },
})

export default NextI18NextInstance

/* Optionally, export class methods as named exports */
export const {
  appWithTranslation,
  withTranslation,
} = NextI18NextInstance

the header detector check the request headers for accept-language which is en in most cases

[josecao]

Hi , i have the bug with the same. How do you fix it ?

[NoobJK]

Hi , i have the bug with the same. How do you fix it ?

i fixed that by doing this:

import NextI18Next from 'next-i18next'
const NextI18NextInstance = new NextI18Next({
localePath: 'static/locales',
defaultLanguage: 'en',
otherLanguages: ['de']
});
export default NextI18NextInstance.i18n.init({
lng: 'en',
});

[isaachinman]

@NoobJK That's not a fix, that's a fundamental misunderstanding of what's going on. You need to disable header/browser detection if you do not want that behaviour.

[NoobJK]

@isaachinman thanks for your reply, when i use defaultLanguage: 'en' my language is always undefined in console log and its never been set in cookies, unless i use i18n.changeLanguage('en') or doing that export default NextI18NextInstance.i18n.init({lng: 'en',}); can you help me how to fix that? please