import { useTranslation } from 'react-i18next';

​

function MyComponent() {

  const { t, i18n } = useTranslation();

​

  const changeLanguage = (lng) => {

    i18n.changeLanguage(lng);

  };

​

  return (

    <div>

      <h1>{t('welcome')}</h1>

      <p>{t('greeting', { name: 'John' })}</p>

​

      <button onClick={() => changeLanguage('en')}>English</button>

      <button onClick={() => changeLanguage('ar')}>Arabic</button>

    </div>

  );

}

​

export default MyComponent;

import i18n from 'i18next';

import { initReactI18next } from 'react-i18next';

​

i18n.use(initReactI18next).init({

  resources: {

    en: {

      translation: {

        welcome: 'Welcome',

        greeting: 'Hello, {{name}}!',

      },

    },

    ar: {

      translation: {

        welcome: 'أهلاً بك',

        greeting: 'مرحبًا، {{name}}!',

      },

    },

  },

  lng: 'en',

  fallbackLng: 'en',

  interpolation: {

    escapeValue: false,

  },

});

​

export default i18n;

import { appWithTranslation } from 'next-translate';

import { I18nextProvider } from 'react-i18next';

import i18n from '../i18n';

​

function MyApp({ Component, pageProps }) {

  return (

    <I18nextProvider i18n={i18n}>

      <Component {...pageProps} />

    </I18nextProvider>

  );

}

​

export default appWithTranslation(MyApp);