这是Nextjs笔记的第二天，今天花时间研究了Nextjs里如何实现多语言部，其实Nextjs内置了一个方案：即在路由上添加参数表示不同的语言的页面如：/cn/home表示主页面的中文版，总感觉不太好用，于是开始了自己的研究。
这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
我们要做什么事
我们需要做到：
- 客户端切换语言的功能，切换后页面刷新服务端返回修改后的语言的页面到客户端。
- 页面加载后用户可以实时修改语言，且不刷新页面。
我们需要把修改后的语言数据同步到服务端，这样页面刷新时读取语言相关的数据并返回正确版本的页面给客户端即可。
问题是如何存储这份数据？
- 借助住接口。将数据同步到后端（数据库里），这样每次页面刷新，把数据从数据库里load出来据此渲染页面。缺点是每次页面刷新都需要等待一次接口调用才能组装并返回页面。增加了时延
- 将数据写入cookie。每次页面刷新cookie自动带到服务端，服务端读取该数据后组装病返回页面。缺点：没有
将第二个方案在团队里讨论了一下，确定执行第二个方案。
怎么做
确定了方案，开始思考怎么实现了。
其实，这里有两个状态/store：
- 我们需要在每次request到nextjs服务层时读取cookie，然后根据此cookie去初始化一些响应式数据，再将依赖该数据的页面渲染出来扔到前端。
- 页面渲染到客户端后，客户端维护自己的store，负责客户端用户的语言切换
所以，客户端层和nextjs server层都需要初始化自己的store。
具体代码
//_app.tsx。服务端曾选择统一在_app.tsx文件里执行 数据初始化
App.getInitialProps = async (appContext:any) => {
// 'AppTree', 'Component', 'router', 'ctx'
const context = appContext.ctx
const cookieLang = context.req.cookies.lang;
//set server side store
shareStore?.updateLang(cookieLang||"英文");
const appProps = await App.getInitialProps(appContext);
return { ...appProps }
}
//share-store.ts
export class ShareStore {
lang:string = Cookies.get("lang")||"英文";//客户端读取cookie初始化
}
最后
感谢阅读，如有任何问题欢迎留言讨论
