{"id":21716683,"url":"https://github.com/postor/next-i18n-loader","last_synced_at":"2026-04-11T15:34:09.574Z","repository":{"id":230266488,"uuid":"319576692","full_name":"postor/next-i18n-loader","owner":"postor","description":"基于 webpack loader 的 next.js 多国语言方案 | i18n for next.js based on webpack loader","archived":false,"fork":false,"pushed_at":"2020-12-12T02:54:34.000Z","size":112,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-27T15:22:43.388Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/postor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-12-08T08:37:26.000Z","updated_at":"2024-02-28T18:53:50.000Z","dependencies_parsed_at":"2024-03-28T19:17:37.378Z","dependency_job_id":"192e438a-9092-414e-866e-2a9d9865bfcb","html_url":"https://github.com/postor/next-i18n-loader","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"a8f3604cc7c5ef96a3b9cb8052873cf45b5c07e5"},"previous_names":["postor/next-i18n-loader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postor%2Fnext-i18n-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postor%2Fnext-i18n-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postor%2Fnext-i18n-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postor%2Fnext-i18n-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postor","download_url":"https://codeload.github.com/postor/next-i18n-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244679628,"owners_count":20492447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-26T01:12:46.884Z","updated_at":"2025-12-31T00:04:38.720Z","avatar_url":"https://github.com/postor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-i18n-loader\n\n基于 webpack loader 的 next.js 多国语言方案 | i18n for next.js based on webpack loader \n\n## 特性 | features\n\n- （针对i18next）无需提前指定 namespace，自动按需加载翻译 | no need to specify namespace, get translations in need\n- 可以使用翻译 API 实现网站翻译 | can use tranlation api instead of human work \n- next v10\n\n\n## 示例 | example\n\n```\ncd examples/basic\nnpm i\nnode ./translate-server.js\n# 另开命令行窗口 | in another shell\nnpm run dev\n# http://localhost:3000\n```\n\n## 使用 | usage\n\n初始化 next v10 项目 | init next v10\n\n```\nnpm init -y\nnpm i next react react-dom next-i18n-loader axios -S\n```\n\n\n配置 i18n 和 loader | config i18n and loader\n\n```\n// next.config.js\nmodule.exports = (phase, { defaultConfig }) =\u003e {\n  return {\n    ...defaultConfig,\n    i18n: {\n      locales: ['en', 'zh'],\n      defaultLocale: 'en'\n    },\n    webpack: (config) =\u003e {\n      config.module.rules.push({\n        test: /\\.js/,\n        use: {\n          loader: 'next-i18n-loader/lib/loader.js',\n          options: {\n            includes: [\n              'pages',\n              'components'\n            ],\n            ecmaVersion: 2020\n          }\n        },\n        exclude: /node_modules|_app\\.js/\n      })\n\n      // console.log(config.module.rules)\n      return config\n    }\n  }\n}\n```\n\n定义 `_app.js` | define `_app.js`\n\n```\n// pages/_app.js\nimport App from 'next/app'\nimport SelectLanguage from \"../components/SelectLanguage\"\nimport getTranslationData from '../get-translation'\nimport { I18nProvider } from \"next-i18n-loader/lib\"\n\n\nfunction MyApp({ Component, pageProps, translationData }) {\n  return (\u003cI18nProvider translationData={translationData}\u003e\n    \u003cSelectLanguage /\u003e\n    \u003cComponent {...pageProps} /\u003e\n  \u003c/I18nProvider\u003e)\n}\n\nMyApp.getInitialProps = async (appContext) =\u003e {\n  let { router, Component } = appContext\n  // console.log(router, Component, { translationKeys: Component.translationKeys })\n  const [appProps, translationData] = await Promise.all([\n    App.getInitialProps(appContext),\n    getTranslationData(Component.translationKeys, router.locale, router.defaultLocale)\n  ])\n  return { ...appProps, translationData }\n}\n\nexport default MyApp\n```\n\n定义获取翻译方法 | define how to get translations\n\n```\n// get-translation.js\n\nimport axios from 'axios'\nconst instance = axios.create()\n\nasync function translate(text, to, from) {\n  // 查看翻译服务代码 ./translate-server.js | check translate server code at ./translate-server.js\n  let res = await instance.get('http://localhost:3001', { params: { text, to, from } })\n  return res.data\n}\n\nasync function getTranslationData(keys = [], to, from) {\n  if (to === from) return {}\n  let rtn = {}\n  let values = await Promise.all(keys.map(x =\u003e translate(x, to, from)))\n  for (let i = 0; i \u003c keys.length; i++) {\n    rtn[keys[i]] = values[i]\n  }\n  return rtn\n}\n\nexport default getTranslationData\n```\n\n然后开发组件 | then code components\n\n```\n// components/Hello.js\nimport useTranslation from \"next-i18n-loader/lib\"\n\nconst Hello = () =\u003e {\n  let { t } = useTranslation()\n  return (\u003cdiv\u003e{t('Hello {{name}}', { name: 'Josh' })} from component Hello\u003c/div\u003e)\n}\n\nexport default Hello\n```\n\n和页面即可 | and pages\n\n```\n// pages/index.js\nimport Hello from '../components/Hello'\nimport useTranslation from 'next-i18n-loader/lib'\n\nconst Index = (props) =\u003e {\n  let { t } = useTranslation()\n  return (\u003cdiv\u003e\n    \u003cp\u003e{t('Welcome')}\u003c/p\u003e\n    \u003cHello /\u003e\n  \u003c/div\u003e)\n}\n\nIndex.getInitialProps = async (ctx) =\u003e {\n  return { a: 1 }\n}\nexport default Index\n```\n\n切换语言 | change language\n\n```\n// components/SelectLanguage.js \nimport { useRouter } from 'next/router'\n\nconst SelectLanguage = () =\u003e {\n  let { locale, locales, pathname, asPath, push } = useRouter()\n  return (\u003cselect\n    value={locale}\n    onChange={e =\u003e push(pathname, asPath, { locale: e.target.value })}\u003e\n    {locales.map(x =\u003e (\u003coption\n      key={x}\n      value={x}\u003e{x}\u003c/option\u003e))}\n  \u003c/select\u003e)\n}\n\nexport default SelectLanguage\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostor%2Fnext-i18n-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostor%2Fnext-i18n-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostor%2Fnext-i18n-loader/lists"}