next-i18next Reload page seems to broke the language. Dynamic keys?

Question

I have follow the tutorial.. this is my app.js and my index.js

Index.js

import { withTranslation } from '../i18n'
class Index extends React.Component {

  static async getInitialProps (params) {
    const { store, isServer, req, query } = params;
    if (isServer) {
      await store.dispatch(restoreStatus(req));   
      await store.dispatch(restoreBasicSettings(req));  
      await store.dispatch(restoreSNMPSettings(req));    
      await store.dispatch(restoreSIPSettings(req));  
      await store.dispatch(restoreHardwareSettings(req)); 
      await store.dispatch(restoreAdvancedSettings(req));  
    }
  }

  render () {
    return (
      <Layout>
        <MainPage />
      </Layout>
    )
  }
}

_app.js

export default withTranslation('common')(Index)

import React from 'react'
import { Provider } from "react-redux";
import App, { Container } from "next/app";
import withRedux from "next-redux-wrapper";
import { initStore } from '../statemanagement/store'
import '../styles/index.css'

import { appWithTranslation } from '../i18n'

export default withRedux(initStore, {debug: false})(appWithTranslation(class MyApp extends App {

    static async getInitialProps({Component, ctx}) {
        return {
            pageProps: {
                // Call page-level getInitialProps
                ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
            }
        };
    }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Container>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </Container>
        );
    }
}));

Then I have a Menu component that load a settings page with different menus.

import { withTranslation } from '../../../i18n'

class SettingsView extends PureComponent {

    constructor(props) {
      super(props);
    }

    componentDidMount() {
  
    }
  
    componentWillUnmount() {
  
    }
  
    render() {
      this._menu = [
        {

          title: this.props.t('menu_status'), // Title that is displayed as text in the menu
          url: "/status", // Identifier (url-slug)
          footerVisible: false

        },
        {
          title: this.props.t('menu_basic'), 
          url: "/settings/basicSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_snmp'),
          url: "/settings/snmpSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_sip'),
          url: "/settings/sipSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_hardware'),
          url: "/settings/hardwareSettings",
          footerVisible: true
        },
        {
          title: this.props.t('menu_advanced'),
          url: "/settings/advancedSettings",
          footerVisible: true
        }
      ];
         // Return your Settings Pane
         return (
          <SettingsPane items={this._menu} index="/status" >
          <SettingsMenu headline="Intercom" />
          <SettingsSingleContent header={true}>
              <SettingsPage handler="/status" >
                  <StatusSettingsForm/>
              </SettingsPage>
              <SettingsPage handler="/settings/basicSettings">
                  <BasicSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/snmpSettings">
                  <SNMPSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/sipSettings">
                  <SIPSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/hardwareSettings">
                  <HardwareSettingsForm />
              </SettingsPage>
              <SettingsPage handler="/settings/advancedSettings" >
                  <AdvancedSettingsForm />
              </SettingsPage>
          </SettingsSingleContent>
        </SettingsPane>
          
         )
      }
  }
 

  export default withTranslation()(SettingsView)

I don't know how to make this to change dynamically as this menu only rerender on loading page (location.reload()).

Then in one of my form settings I have the language selector.

function submit(values, dispatch) {
  i18n.changeLanguage(values.language == "spanish" ? "es": "en")
  return dispatch(setAdvancedSetting(values));
}

So when I changed the language every label of the page changes to the correct language (only the ones related to Menu not get changed (as it has the problem about reload the menu)).

So If I try yo reload the page with the language changes I don't know why but the page rerenders with the default language. May something with the initialprops I don't fully understand or other option...

So I am struggling with two problems:

1. How to design better the menu to change with the language changes. I think about dynamic language keys.. for example.

    this.props.t('menu_basic_settings) generate Basic Settings
   

   but this is possible??

    this.props.t({this.props.header}) 
   

   I mean using an external props?

2. When reload the window the page switch to default language