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;