import { useEffect } from "react";
import { useRouter } from "next/router";
import { useTranslation } from "next-translate";

function MyPage() {
  const router = useRouter();
  const { t, i18n } = useTranslation();

  useEffect(() => {
    console.log(`Language changed to ${i18n.language}`);
    // Do something here when the language changes
  }, [i18n.language]);

  return <div>{t("hello")}</div>;
}

export default MyPage;

使用useEffect钩子监听i18n.language属性的更改，当用户更改语言时，next-translate会自动更新该属性。当语言发生变化时，会调用effect函数，您可以做一些响应。
请注意，您应该在useEffect的依赖数组中包含i18n.language。这确保了每次语言更改时都会调用effect函数。

可以使用i18 next示例获取当前语言，还可以为i18 next示例中的'languageChanged'事件添加事件侦听器

import { useEffect, useCallback } from 'react';
import i18n from 'i18next';  

function useLanguageChange(onLanguageChange) {
  const handleLanguageChanged = useCallback(() => {
    if (typeof onLanguageChange === 'function') {
      onLanguageChange(i18n.language); 
    }
  }, [onLanguageChange]);

  useEffect(() => {
    i18n.on('languageChanged', handleLanguageChanged); 
    return () => {
      i18n.off('languageChanged', handleLanguageChanged);  
    };
  }, [handleLanguageChanged]);
}

然后，您可以使用useTranslation钩子来获取translate函数（t）和i18 next示例，并执行基于新语言获取新资源的操作。

import { useTranslation } from 'react-i18next'; 
import useLanguageChange from '../hooks/useLanguageChange';

export default function MyComponent() {
  const { t, i18n } = useTranslation(); 

  useLanguageChange((newLanguage) => {
    console.log('Language changed to:', newLanguage);
    
  });

  const changeLanguage = (language) => {
    i18n.changeLanguage(language); 
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('fr')}>Français</button>
    </div>
  );
}

你需要i18 next i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpApi from 'i18next-http-backend';

i18n
  .use(HttpApi)
  .use(initReactI18next)
  .init({
    supportedLngs: ['en', 'fr'],
    fallbackLng: 'en',
    debug: true,

    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },

    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

你也可以使用`next-translate'来翻译创建一个next.config.js

const nextTranslate = require('next-translate');

module.exports = nextTranslate();

然后在i18n.js中

module.exports = {
  locales: ['en', 'fr'],
  defaultLocale: 'en',
  pages: {
    '*': ['common'],
  },
};

您可以使用next/router中的useRouter钩子来更改语言，并使用next-translate中的useTranslation钩子来翻译组件中的文本：

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
import useTranslation from 'next-translate/useTranslation';

export default function MyComponent() {
  const { t } = useTranslation('common');
  const router = useRouter();

  useEffect(() => {
    console.log('Language changed to:', router.locale);
  }, [router.locale]);

  const changeLanguage = (locale) => {
    router.push(router.pathname, router.asPath, { locale });
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('fr')}>Français</button>
    </div>
  );
}

在app.js中

import I18nProvider from 'next-translate/I18nProvider';
import '../i18n';

function MyApp({ Component, pageProps }) {
  return (
    <I18nProvider>
      <Component {...pageProps} />
    </I18nProvider>
  );
}

export default MyApp;

Here is a full example