Next-translate切换语言时页面未翻译的问题排查

我正在为Next.js应用添加多语言翻译功能，已安装必要依赖并配置Locales命名空间，locales目录位于根目录，编译正常（这是我首次使用Next.js和Next-translate，仅参考教程操作）。

遇到的问题：使用自定义的语言切换组件切换语言时，页面内容（如faqHeader组件）未随之翻译更新。以下是相关组件及配置的完整代码：

MainHeader 组件 #

import Link from "next/link";
import mainHeaderStyles from "./main-header.module.css";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import LanguageSwitcher from "../language-switcher/language-switcher";

export default function MainHeader() {
  const options = [
    {
      value: "en",
      label: "English",
    },
    {
      value: "de",
      label: "Deutsch",
    },
  ];
  // 用useState存储下拉选择的语言值
  const [selectedLanguageValue, setSelectedLanguageValue] = useState("");
  // 路由实例
  const router = useRouter();

  // 语言切换的 onChange 处理函数
  const handleLanguageSelect = (event) => {
    setSelectedLanguageValue(event.target.value);
    const locale = event.target.value;
    router.push(
      {
        pathname: router.pathname,
        query: router.query,
      },
      null,
      { locale }
    );
  };

  return (
    <header className={mainHeaderStyles.header_container}>
           {/** 其他已有内容 **/}
          <li
            className={
              mainHeaderStyles.header_navigationBar_listContainer_items
            }
          >
            <LanguageSwitcher
              options={options}
              selectedLanguageValue={selectedLanguageValue}
              handleLanguageChange={handleLanguageSelect}
            />
          </li>
            {/** 其他内容 **/}
        </ul>
      </nav>
    </header>
  );
}

语言切换组件 #

import { useRouter } from "next/router";
import LanguageSwitcherStyles from "./language-switcher.module.css";

export default function LanguageSwitcher(props) {
  const languageSelected = props.selectedLanguageValue;

  return (
    <div className={`${LanguageSwitcherStyles.language_select_container}`}>
      <img
        src={`../logo/${languageSelected === "en" ? "uk.png" : "deutsch.png"}`}
        className={`${LanguageSwitcherStyles.lanaguage_image}`}
      />
      <select
        name="language"
        className={` ${LanguageSwitcherStyles.language_select}`}
        onChange={props.handleLanguageChange}
        value={props.selectedLanguageValue}
      >
        {props.options.map((item, index) => {
          return (
            <option key={index} value={item.value}>
              {item.label}
            </option>
          );
        })}
      </select>
    </div>
  );
}

next.config.js 文件 #

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

const nextTranslate = require("next-translate-plugin");

module.exports = {
  ...nextConfig,
  ...nextTranslate(),
};

i18n.json 文件 #

{
  "locales": ["en", "de"],
  "defaultLocale": "de",
  "pages": {
    "*": ["common"],
    "/": ["home"],
    "/about": ["about"],
    "/contact": ["contact"],
    "/faq": ["faq"],
    "/work": ["work"]
  }
}

请问我遗漏了什么？哪里操作有误？

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