next-i18next 常见Bug记录

TypeError: Cannot read property 'wait' of null

此处根本原因为next版本（使用withNamespaces导入命名空间报错）
^5.0.0版本不支持导入_app.js导致i18n注入失败
^6.0.0版本或者以上版本会支持导入_app.js
尝试更新withNamespaces的wait和options并没有效果，相反会导致之后的一系列bug
此处使用next-i18next步骤链接: [next-i18next].
附上react-i18next的链接: [react-i18next].
附上i18next的链接: [i18next].
附上语言转换操作技巧：使用translate-components插件可以通过node命令进行生成对应json文件，然后根据需要进行转换即可

You have not declared a namespacesRequired array on your page-level component

此处在页面级组件不导入namespacesRequired命名空间组或者在static下的locales有未引用的json都会报这个警告

nexti18next FrontWebsite Router Options

此处如果next没有版本限制并且可以使后台支持最好的办法是使用官方文档推荐做法
此方案适用于因后台无法提供支持且无法使用pm2服务器

1. 更改exportPathMap配置使带有语言前缀的路径可以正常刷新定向
2. 在next钩子_app.js中render之前去检测当前Router路径得以判断出当前应该changeLanguage哪种语言
3. 封装next/link next/router以使前端的路由定向正常

以下附上代码方案

/**************************************
    --------------_app.js--------------
**************************************/
import React from 'react'
import App, { Container } from 'next/app'
import { i18n, appWithTranslation } from '../i18n'

class MyApp extends App {
//     static async getInitialProps({ Component, ctx }) {
//       // const language = ctx ? ctx.req.headers['accept-language'] : (navigator.language || navigator.browserLanguage).toLowerCase()
//    let pageProps = {}
//     
//       if (Component.getInitialProps) {
//         pageProps = await Component.getInitialProps(ctx)
//       }
//     
//       return { pageProps }
//     }
  render() {
    const { Component, pageProps } = this.props
    // console.log(this.props)
    const languageUrl = this.props.router.asPath.replace(/\//g, '').substr(0, 2)
    const languages = ['zh', 'th']
    const language = ~languages.indexOf(languageUrl) ? languageUrl : languages[0]
    i18n.changeLanguage(language)
    return (
        <Container>
                <Component {...pageProps} />
        </Container>
    )
    }
}

export default appWithTranslation(MyApp)

/**************************************
    --------------Link---------------
**************************************/
import React from 'react'
import NextLink from 'next/link'
import { i18n } from '../../i18n'

class Link extends React.Component {
    render () {
        const {
            as,
            href,
            children,
            ...props
        } = this.props;
        
        return React.createElement(NextLink, { 
            href: href,
            as: `/${i18n.language}${href}`
        }, children);
    }
}

export default Link

/**************************************
    ------------Router-------------
**************************************/
import NextRouter from 'next/router';
import { i18n } from '../../i18n'
const propertyFields = ['pathname', 'router', 'query', 'asPath', 'components', 'events'];
const coreMethods = ['reload', 'back', 'beforePopState', 'ready', 'prefetch'];
const wrappedMethods = ['push', 'replace'];

const Router = {};
propertyFields.forEach(field => {
Object.defineProperty(Router, field, {
    get() {
    return NextRouter[field];
    }
});
});
coreMethods.forEach(method => {
Router[method] = (...args) => NextRouter[method](...args);
});
wrappedMethods.forEach(method => {
Router[method] = (path, as, options) => {
    return NextRouter[method](path, `/${i18n.language}${path}`, options);
};
});

export default Router;

转载于:https://www.cnblogs.com/universe-cosmo/p/10968942.html