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服务器

更改exportPathMap配置使带有语言前缀的路径可以正常刷新定向
在next钩子_app.js中render之前去检测当前Router路径得以判断出当前应该changeLanguage哪种语言
封装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;

版本号 x.y.z ：
z ：表示一些小的bugfix, 更改z的号，
y ：表示一些大的版本更改，比如一些API的变化
x ：表示一些设计的变动及模块的重构之类的，会升级x版本号
在package.json里面dependencies依赖包的版本号前面的符号有两种，一种是~，一种是^
~的意思是匹配最近的小版本比如~1.0.2将会匹配所有的1.0.x版本，但不匹配1.1.0
^的意思是最近的一个大版本比如1.0.2 将会匹配所有 1.x.x, 但不包括2.x.x

next-i18next 常见Bug记录

猜你喜欢