\n \n\n## Demos\n\n- [Next.js SSG](https://codesandbox.io/p/github/yrobot-demo/i18next-ssg/master)\n - [Demo Repo](https://github.com/yrobot-demo/i18next-ssg)\n\n## How To Start\n\n### 1. Install `i18next-ssg`\n\n```\nyarn add i18next-ssg next-i18next react-i18next i18next\n```\n\n### 2. Project Setup\n\nFirst, create a `next-i18next.config.js` file in the root of your project.\n\n`next-i18next.config.js`\n\n```js\nmodule.exports = {\n i18n: {\n defaultLocale: \"en\", // the default language\n locales: [\"en\", \"zh\"], // language list\n },\n};\n```\n\nAnd You have to expose the `i18n` config as the next.js Environment Variable `NEXT_PUBLIC_I18N`.\n\n`next.config.js`\n\n```js\nconst { i18n } = require(\"./next-i18next.config\");\n\nmodule.exports = {\n env: {\n NEXT_PUBLIC_I18N: i18n,\n },\n};\n```\n\n### 3. Add locales json files to your Next.js project\n\n```\n- public\n - locales\n - zh\n - common.json\n - en\n - common.json\n - ... other languages\n```\n\n`public/locales/en/common.json`\n\n```json\n{\n \"title\": \"English Title\"\n}\n```\n\nIf you want to structure your translations/namespaces in a custom way, you will need to pass modified `localePath` and `localeStructure` values into `next-i18next.config.js`. Check detail here https://github.com/i18next/next-i18next#options\n\n### 4. Wrap the app\n\n`pages/_app.tsx`\n\nadd `appWithTranslation` logic\n\n```tsx\nimport { appWithTranslation } from \"i18next-ssg\";\n\nconst App = ({ Component, pageProps }) => ;\n\nexport default appWithTranslation(App);\n```\n\n### 5. Create `pages/[locale]` directory and Add pages under it\n\n```\npages\n - [locale]\n - index.tsx\n - second.tsx\n - third.tsx\n```\n\n> `/second/index.tsx` and `/second.tsx` both work fine for `/second`\n\nAdd locale inject logic in every page, for example: \n`pages/[locale]/index.tsx`\n\n```tsx\nimport { makeStaticProps, getStaticPaths } from \"i18next-ssg/server\";\n\nexport default Page(){\n return
Page
\n}\n\nconst getStaticProps = makeStaticProps([\"common\"]);\nexport { getStaticPaths, getStaticProps };\n```\n\n### 6. use i18n inside the page\n\nfor example:\n\n```tsx\nimport { useTranslation } from \"i18next-ssg\";\n\nexport default function Title() {\n const { t } = useTranslation(\"common\");\n return
{t(\"title\")}
;\n}\n```\n\n### 7. Add root redirect logic [optional]\n\nFirst, create `[[...paths]].tsx` under the `pages` folder (i18next-ssg will auto generate the root pages based on the pages you created under `[locale]`)\n\n`pages/[[...paths]].tsx`\n\n> copy pause the code directly without any changes, it will works fine for your project.\n\n```tsx\nexport { getStaticProps, getStaticPaths } from \"i18next-ssg/Redirect\";\nimport { useRootPathRedirect } from \"i18next-ssg\";\n\nexport default function Page() {\n useRootPathRedirect();\n return
Redirecting...
;\n}\n```\n\nThen, the auto redirect logic works like this:\n\n- / => /[locale]\n- /second => /[locale]/second\n- /third => /[locale]/third\n\nThe `[locale]` value based on `getLocale`, which strategy works follow this:\n\n`[url locale]` > `[user set locale in localStorage]` > `[locale detect from browser navigator]`\n\n---\n\nAfter all these steps and run `yarn build` (`next build && next export -o build`), you will get output files below:\n\n```\n- build\n - locales\n - ... your locale json files\n - index.html\n - second.html\n - third.html\n - zh.html\n - en.html\n - en\n - second.html\n - third.html\n - zh\n - second.html\n - third.html\n```\n\n## Other Tricks\n\n### get your i18n config quickly\n\nthis work fine on both server and browser.\n\n```tsx\nimport { config } from \"i18next-ssg\";\n\nconsole.log(config.locales);\nconsole.log(config.defaultLocale);\n```\n\n### All functions exported from `next-i18next` or `react-i18next`\n\n```tsx\nimport {\n appWithTranslation,\n serverSideTranslations,\n i18n,\n withTranslation,\n I18nContext,\n Trans,\n Translation,\n useTranslation,\n} from \"i18next-ssg\";\n```\n\n### locale route logic\n\n#### `I18NLink`\n\n```tsx\nimport { I18NLink } from \"i18next-ssg\";\nexport default function Pages() {\n return Sansa; // /sansa => /[locale]/sansa\n}\n```\n\n#### `localize`\n\n```tsx\nimport { useRouter } from \"next/router\";\nimport { localize } from \"i18next-ssg\";\nexport default function Pages() {\n const router = useRouter();\n return (\n {\n router.push(localize(\"/sansa\")); // /sansa => /[locale]/sansa\n }}\n >\n Sansa\n \n );\n}\n```\n\n### locale switch logic\n\n```tsx\nimport Link from \"next/link\";\nimport { useLocaleSwitcher, setUserLocale } from \"i18next-ssg\";\n\nconst localeMap: Record = {\n en: \"English\",\n zh: \"中文\",\n};\n\nfunction LocaleSwitcher() {\n const {\n label, // current locale label\n options, // the option list of other locales\n } = useLocaleSwitcher({ localeMap });\n return (\n
![\"logo\"](\"https://images.yrobot.top/2022-11-19/i18next-ssg-10-33-34.svg\")
\n \n![\"npm](\"https://img.shields.io/npm/v/i18next-ssg.svg\")
\n