Determining the language by the path of Url

Question

I tried to find a way to change the language by changing the site's sub-path in the next-i18next package, I searched the Internet (https://github.com/isaachinman/next-i18next/issues/32 , https://github.com/i18next/i18next-browser-languageDetector#detector-options) for an answer to this question, but it did not work. After changing the subpath in the url it is duplicated and redirects me to a page that does not exist.

my code:

// path-to-my-project/i18n.js
const NextI18Next = require('next-i18next').default;
const i18nextBrowserLanguageDetector = require('i18next-browser-languagedetector').default;
const { localeSubpaths } = require('next/config').default().publicRuntimeConfig;
const path = require('path');

module.exports = new NextI18Next({
    otherLanguages: ['ru'],
    defaultNS: 'common',
    localeSubpaths,
    localePath: path.resolve('./public/static/locales'),
    use: [i18nextBrowserLanguageDetector],
});

// path-to-my-project/pages/_app.js
import '../styles/main.scss';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import Router from 'next/router';
import App from 'next/app';
import { appWithTranslation } from '../i18n';

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

const MyApp = ({ Component, pageProps }) => (
    <Component {...pageProps} />
);

MyApp.getInitialProps = async (appContext) => ({ ...await App.getInitialProps(appContext) });

export default appWithTranslation(MyApp);

maybe I just missed something, because it's my first project on next.js, so I'm asking for help in the community and would be grateful for any help or hint.

Answer 1

By default next-i18next will try to detect the language to show from users browser.

Try to disable it.

const NextI18Next = require('next-i18next').default
const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
const path = require('path')

module.exports = new NextI18Next({
  browserLanguageDetection: false, // <---
  serverLanguageDetection: false, // <---
  otherLanguages: ['de'],
  localeSubpaths,
  localePath: path.resolve('./public/static/locales')
})

Answer 2

in file next.config.js i have this settings:

// path/to/project/next.config.js

const { nextI18NextRewrites } = require('next-i18next/rewrites');

const localeSubpaths = {
    ru: 'ru',
};

module.exports = {
    rewrites: async () => nextI18NextRewrites(localeSubpaths),
    publicRuntimeConfig: {
        localeSubpaths,
    },
    devIndicators: {
        autoPrerender: false,
    },
};

but there was not enough configuration for English localization, so you just need to add it:

// path/to/project/next.config.js

const { nextI18NextRewrites } = require('next-i18next/rewrites');

const localeSubpaths = {
    en: 'en', // <------
    ru: 'ru',
};

module.exports = {
    rewrites: async () => nextI18NextRewrites(localeSubpaths),
    publicRuntimeConfig: {
        localeSubpaths,
    },
    devIndicators: {
        autoPrerender: false,
    },
};