Next.js国际化配置

Next.js国际化配置

我使用的是next-i18next这个包。

1. 根据next-i18nextnpm包中提示，下载相应的插件：
   yarn add next-i18next react-i18next i18nex
2. 项目根文件下创建一个next-i18next.config.js文件,内容：

module.exports = {
  i18n: {
    defaultLocale: 'cn',//默认语言
    locales: ['en', 'cn'],//需要的多语言
  },
};

3. 项目根目录创建一个next.config.js文件，内容：

const { i18n } = require('./next-i18next.config');
module.exports = {
  i18n,
};

4. 在public目录下创建一个locales文件夹，如图：
   
   locales文件夹下创建的en、cn文件夹名字与next-i18next.config.js文件中locales数组配置中名称一致
5. 页面中使用
   

---

json文件内容

---

6.最后在_app.tsx文件中引入appWithTranslation
最后的结果就是这样啦