reactjs - next-i18next は、ビルド中に設定された間違ったリソースを使用します

Question

サブパス ルーティングを使用する 4 つのロケールを持つアプリがあります。開発中は問題なく動作しますが、ビルド中に間違ったロケール セットが使用されます。その結果、誤った翻訳でページが読み込まれ、正しい翻訳に変わってちらつきが発生します。これは、ローカルと本番環境の両方で発生します (私は vercel を使用しています)。また、アクティブなサブパスに依存しません (example.com、example.com/fr などでランダムなページ バージョンを取得します)。

じぶんのnext-i18next.config.js

const path = require("path");

module.exports = {
  // config for next's internationalized routing
  i18n: {
    defaultLocale: "en",
    locales: ["en", "de", "fr", "cn"],
    localeDetection: false,
  },

  // config for i18next
  localePath: path.resolve("./src/locales"),
  fallbackLng: "en",
  defaultNS: [],
};

私getStaticPropsのsrc/pages/index.tsx

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  console.log("getting static props for", locale);
  return {
    props: {
      ...(await serverSideTranslations(locale!, [
        "navigation",
        "fileTypes",
        "features",
        "footer",
      ])),
    },
  };
};

それから自分src/pages/index.tsx自身

const IndexPage = () => {
  const { locale } = useRouter();
  console.log('rendering index page for', locale);

  return <div><Navbar /></div>
}

とsrc/components/Navbar

const Navbar = () => {
  const { locale } = useRouter();
  const { t } = useTranslation('navigation');

  console.log(`from nav: locale is ${locale} and translation is ${t('navigation:pricing')}`);

  return <nav>...</nav>
}

さて、次のビルドを行うと、次の順序でメッセージが表示されます。

getting static props for en
getting static props for de
getting static props for fr
getting static props for cn
from nav: locale is en and translation is Tarifs
rendering index page for en
from nav: locale is de and translation is Tarifs
rendering index page for de
from nav: locale is fr and translation is Preise
rendering index page for fr
from nav: locale is cn and translation is Preise
rendering index page for cn

この問題に数日間苦労していますが、この問題の原因となるものは何も見つかりません。私は何を間違っていますか？