应用目录：react-i18next：您需要使用 initReactI18next 传入 i18next 实例

问：

我正在尝试在我的应用程序上实现。next-i18nextnext.js 14app directory

这是我所做的：

1. npm i next-i18next i18next react-i18next
2. 在项目根目录下创建：next-i18next.config.js

/** @type {import('next-i18next').UserConfig} */
module.exports = {
    i18n: {
        defaultLocale: "fr",
        locales: ["fr", "en"],
    },
};

3. 编辑：next.config.js

/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");

const nextConfig = {
    i18n,
};

module.exports = nextConfig;

4. 在我的翻译上和我的翻译中创建了两个文件jsonpublic/locales/en/fr
5. 编辑了我的登录页面：

"use client";

import { useState } from "react";
import { useTranslation } from "next-i18next";
import Logo from "@/components/Common/Logo";

export const RightSide = () => {
    const [hasAccount, setHasAccount] = useState(true);
    const { t } = useTranslation("login");

    return (
        <>
            <Logo />

            <h1>{hasAccount ? t("signin") : t("signup")}</h1>

            <h3>{hasAccount ? t("welcome_back") : t("new_user")}</h3>

            <p>
                {hasAccount ? t("no_account") : t("have_account")}
                <button onClick={() => setHasAccount(!hasAccount)}>
                    {hasAccount ? t("create_one") : t("login")}
                </button>
            </p>
        </>
    );
};

但它不起作用。登录页面显示密钥（如“登录”、“welcome_back”等），控制台显示：react-i18next:: You will need to pass in an i18next instance by using initReactI18next

我错过了哪一步？