非页面组件中next-i18next useTranslation失效问题求助

我遇到的问题是：只有在使用getStaticProps的页面组件中，next-i18next的翻译功能才能正常工作；但在常规组件中，调用t()函数返回的始终是翻译键名而非对应翻译值，翻译完全无效。

工作的页面组件示例 #

带getStaticProps的Login页面，翻译正常生效：

import {useTranslation} from 'next-i18next';
export async function getStaticProps({locale}: any) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'login'])),
    },
  };
}

export default function Login() {
  const {t} = useTranslation(); 
  console.log(t('common:user')); // 返回翻译文件中定义的'User'
  return <>></>
}

不工作的常规组件示例 #

Sidebar组件，翻译无效：

import {useTranslation} from 'next-i18next';
export function Sidebar(props: SidebarProps) {
  const {t} = useTranslation('common');
  console.log(t('common:user')); // 返回'common:user'
}

项目相关信息 #

翻译文件结构 #

public文件夹下的locales目录结构：

public/locales/
├── es/
│   ├── common.json
│   ├── login.json
│   ├── sidebar.json
│   └── ...
├── en/
│   └── ...
└── pt/
    └── ...

next-i18next.config.js #

module.exports = {
  i18n: {
    defaultLocale: 'pt',
    locales: ['pt', 'en', 'es'],
    fallbackLng: ['en'],
  },
};

next.config.js #

const { i18n } = require('./next-i18next.config')
module.exports = {
  trailingSlash: true,
  reactStrictMode: false,
  i18n,
  env: {
    BASE_URL: process.env.BASE_URL,
    VIACEP: process.env.VIACEP,
    DEFAULT_IMAGE_TYPE: process.env.DEFAULT_IMAGE_TYPE
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  }
};

_app.tsx #

import {DefaultLayout} from '#/layout';
import {appWithTranslation} from 'next-i18next';
import type {AppProps} from 'next/app';
import {useEffect, useState} from 'react';
import 'react-toastify/dist/ReactToastify.css';
import 'react-toggle/style.css';
import styled from 'styled-components';
import {useLoader} from '#/components/loader';
import {useConfirmModal} from '#/components/modal/confirm-modal';
import {useErrorModal} from '#/components/modal/error-modal';
import {useToast} from '#/components/toast';
import {useGlobalContext} from '#/hooks/use-global-context';
import {useReload} from '#/hooks/use-reload';
import '#/styles/globals.css';
import {useThemeProvider} from '#/theme/theme';
import {GlobalStyle} from './global-styles';

console.warn = console.error = () => {};

const AppView = styled.div`
  position: relative;
  z-index: 1;
  width: 100vw;
`;

function App({Component, pageProps, ...appProps}: AppProps) {
  const Theme = useThemeProvider();
  const Context = useGlobalContext();
  const Loader = useLoader();
  const ErrorModal = useErrorModal();
  const ConfirmModal = useConfirmModal();
  const Toast = useToast();
  const Reload = useReload();

  const [showChild, setShowChild] = useState(false);
  useEffect(() => {
    setShowChild(true);
  }, []);

  if (!showChild) {
    return null;
  }

  if (typeof window === 'undefined') {
    return <>></>;
  }

  function getContent() {
    if ([`/login`].includes(appProps.router.pathname)) return <Component {...pageProps} />;

    return (
      <DefaultLayout>
        <Component {...pageProps} />{' '}
      </DefaultLayout>
    );
  }

  return (
    <Context.Component>
      <Theme.Component>
        <AppView>
          <Loader.Component />
          <Toast.Component />
          <ErrorModal.Component />
          <ConfirmModal.Component />
          <Reload.Component />
          <GlobalStyle />
          {getContent()}
        </AppView>
      </Theme.Component>
    </Context.Component>
  );
}

export default appWithTranslation(App);

依赖版本 #

next-i18next: ^14.0.0

我已经花费5小时查阅资料、使用AI工具和官方文档，但尝试的所有方法都无效，恳请各位提供帮助！

内容的提问来源于stack exchange，提问作者YiazmaT