我正在使用 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 = NextI18NextInstancenext.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);