https://github.com/postor/next-i18n-loader
基于 webpack loader 的 next.js 多国语言方案 | i18n for next.js based on webpack loader
https://github.com/postor/next-i18n-loader
Last synced: 2 months ago
JSON representation
基于 webpack loader 的 next.js 多国语言方案 | i18n for next.js based on webpack loader
- Host: GitHub
- URL: https://github.com/postor/next-i18n-loader
- Owner: postor
- Created: 2020-12-08T08:37:26.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-12-12T02:54:34.000Z (over 4 years ago)
- Last Synced: 2025-02-27T15:22:43.388Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 109 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-i18n-loader
基于 webpack loader 的 next.js 多国语言方案 | i18n for next.js based on webpack loader
## 特性 | features
- （针对i18next）无需提前指定 namespace，自动按需加载翻译 | no need to specify namespace, get translations in need
- 可以使用翻译 API 实现网站翻译 | can use tranlation api instead of human work
- next v10
## 示例 | example
```
cd examples/basic
npm i
node ./translate-server.js
# 另开命令行窗口 | in another shell
npm run dev
# http://localhost:3000
```
## 使用 | usage
初始化 next v10 项目 | init next v10
```
npm init -y
npm i next react react-dom next-i18n-loader axios -S
```
配置 i18n 和 loader | config i18n and loader
```
// next.config.js
module.exports = (phase, { defaultConfig }) => {
return {
...defaultConfig,
i18n: {
locales: ['en', 'zh'],
defaultLocale: 'en'
},
webpack: (config) => {
config.module.rules.push({
test: /\.js/,
use: {
loader: 'next-i18n-loader/lib/loader.js',
options: {
includes: [
'pages',
'components'
],
ecmaVersion: 2020
}
},
exclude: /node_modules|_app\.js/
})
// console.log(config.module.rules)
return config
}
}
}
```
定义 `_app.js` | define `_app.js`
```
// pages/_app.js
import App from 'next/app'
import SelectLanguage from "../components/SelectLanguage"
import getTranslationData from '../get-translation'
import { I18nProvider } from "next-i18n-loader/lib"
function MyApp({ Component, pageProps, translationData }) {
return (
)
}
MyApp.getInitialProps = async (appContext) => {
let { router, Component } = appContext
// console.log(router, Component, { translationKeys: Component.translationKeys })
const [appProps, translationData] = await Promise.all([
App.getInitialProps(appContext),
getTranslationData(Component.translationKeys, router.locale, router.defaultLocale)
])
return { ...appProps, translationData }
}
export default MyApp
```
定义获取翻译方法 | define how to get translations
```
// get-translation.js
import axios from 'axios'
const instance = axios.create()
async function translate(text, to, from) {
// 查看翻译服务代码 ./translate-server.js | check translate server code at ./translate-server.js
let res = await instance.get('http://localhost:3001', { params: { text, to, from } })
return res.data
}
async function getTranslationData(keys = [], to, from) {
if (to === from) return {}
let rtn = {}
let values = await Promise.all(keys.map(x => translate(x, to, from)))
for (let i = 0; i < keys.length; i++) {
rtn[keys[i]] = values[i]
}
return rtn
}
export default getTranslationData
```
然后开发组件 | then code components
```
// components/Hello.js
import useTranslation from "next-i18n-loader/lib"
const Hello = () => {
let { t } = useTranslation()
return (
{t('Hello {{name}}', { name: 'Josh' })} from component Hello)
}
export default Hello
```
和页面即可 | and pages
```
// pages/index.js
import Hello from '../components/Hello'
import useTranslation from 'next-i18n-loader/lib'
const Index = (props) => {
let { t } = useTranslation()
return (
{t('Welcome')}
)
}
Index.getInitialProps = async (ctx) => {
return { a: 1 }
}
export default Index
```
切换语言 | change language
```
// components/SelectLanguage.js
import { useRouter } from 'next/router'
const SelectLanguage = () => {
let { locale, locales, pathname, asPath, push } = useRouter()
return ( push(pathname, asPath, { locale: e.target.value })}>
{locales.map(x => ({x}))}
)
}
export default SelectLanguage
```