带有 next-i18next TypeError 的 NextJs 应用程序：NextI18Next 不是构造函数

Question

我正在使用 next.JS 和包 next-i18next 构建一个多语言网站。我正在将项目从 i18next 移至 next-i18next

就绪 - 在 0.0.0.0:3000 上启动服务器，网址：http://localhost:3000

仍然收到以下错误，有人可以帮忙吗？

TypeError: NextI18Next 不是构造函数

in18.js

const NextI18Next = require('next-i18next/dist/commonjs')
const path = require('path')

const NextI18NextInstance = new NextI18Next({
    browserLanguageDetection: true,
    fallbackLng: false,
    defaultLanguage: 'en',
    otherLanguages: ['en', 'de', 'cs'],
    localeSubpaths: {
        en: "en",
        de: "de",
        cs: "cs"
    },
    load: "currentOnly",
    ns: ["home", "team", "common", "service", "projects"],
    defaultNS: "common",
    localePath: path.resolve('./public/static/locales'),
    localeStructure: "{lng} / {ns}",
    interpolation: {
        prefix: "{",
        suffix: "}",
    },
    debug: false,//process.env.NODE_ENV !== "production",
    saveMissing: false,//process.env.NODE_ENV !== "production",
    localeExtension: 'json',
    serializeConfig: true,
 
})
module.exports = NextI18NextInstance

next.config.js

const withImages = require('next-images')
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
const { i18n } = require('./in18')
module.exports = {
    future: {
        webpack5: true,
    },
    reactStrictMode: true,
    withImages,
    i18n,
    withPlugins : {

    }
}

_app.js

import App from 'next/app';
import { appWithTranslation } from '../next-i18next.config.js'
class MyApp extends App {

  static async getInitialProps({Component, ctx}) {
    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
    return {pageProps: pageProps};
  }
//    <Provider store={store}>
//           <AnalyticsTracker useAnalytics={this.props.useAnalytics} />
  // <Component {...pageProps} />
//</Provider>
  render() {
    const { Component, pageProps } = this.props
    return (

          <Component {...pageProps} />

    )
  }
}

export default appWithTranslation(MyApp);

index.js

import Link from "next/link";
import { i18n } from 'in18'



const  Navbar = function({ i18n }){
        return (
            <React.Fragment>
                {/* Start Mobile Navbar */}
                <div id="offcanvas-flip" className="mobile-navbar uk-mobile-navbar bg-aqiros" uk-offcanvas="flip: true; overlay: true">
                    <div className="uk-offcanvas-bar">

                        <buthrefn className="uk-offcanvas-close" type="buthrefn" uk-close="true"/>

                        <nav className="uk-navbar-container" data-uk-scrollspy-nav="offset: 0; closest: li; scroll: true">
                            <ul className="uk-navbar-nav">

                                    {
                                        i18n.t('common:menu', { returnObjects: true}).map(item=>(
                                            item.subMenu === false

                                                ?
                                                    <li key={"link-"+item.id} className={this.props.pathname === item.link ? "uk-active" : ""}>
                                                        <Link  href={item.link} as={item.link}>{item.title}</Link>
                                                    </li>
                                                :
                                                    <li key={"link-"+item.id} className={this.props.pathname === item.link ? "uk-active" : ""}>
                                                        <Link  href={item.link} as={item.link}>{item.title}</Link>
                                                        <div uk-dropdown="mode: click">
                                                            <ul className="uk-nav uk-dropdown-nav">
                                                                {
                                                                    item.subArticles.map(item=>(
                                                                        <Link key={"sub-link-"+item.id} href={item.link}>{item.title}</Link>
                                                                    ))
                                                                }
                                                            </ul>
                                                        </div>
                                                    </li>
                                        ))
                                    }
                            </ul>
                        </nav>
                    </div>
                </div>
                {/* End Mobile Navbar */}
            </React.Fragment>
        );
}
index.getInitialProps = () => {
    return {
        namespacesRequired: ["common"]
    }
}

export default withTranslation()(Navbar);