{"id":13423788,"url":"https://github.com/i18next/next-i18next","last_synced_at":"2025-05-13T15:02:52.930Z","repository":{"id":37270260,"uuid":"156914027","full_name":"i18next/next-i18next","owner":"i18next","description":"The easiest way to translate your NextJs apps.","archived":false,"fork":false,"pushed_at":"2025-04-06T12:26:52.000Z","size":8882,"stargazers_count":5911,"open_issues_count":0,"forks_count":767,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-05-13T14:21:29.833Z","etag":null,"topics":["i18next","next","nextjs","now","react","react-i18next","reactjs","ssr"],"latest_commit_sha":null,"homepage":"https://next.i18next.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/i18next.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["jamuhl","adrai"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://locize.com"}},"created_at":"2018-11-09T20:23:21.000Z","updated_at":"2025-05-13T12:14:38.000Z","dependencies_parsed_at":"2022-07-10T03:00:27.876Z","dependency_job_id":"7be6573d-ddd7-48ff-8fdd-ef4e5cd6e894","html_url":"https://github.com/i18next/next-i18next","commit_stats":{"total_commits":1193,"total_committers":105,"mean_commits":"11.361904761904762","dds":0.663872590108969,"last_synced_commit":"33a67eb33952cc3070ec9a436bbb215c737065b4"},"previous_names":["isaachinman/next-i18next"],"tags_count":192,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i18next%2Fnext-i18next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i18next%2Fnext-i18next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i18next%2Fnext-i18next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i18next%2Fnext-i18next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/i18next","download_url":"https://codeload.github.com/i18next/next-i18next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253968096,"owners_count":21992252,"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":["i18next","next","nextjs","now","react","react-i18next","reactjs","ssr"],"created_at":"2024-07-31T00:00:42.461Z","updated_at":"2025-05-13T15:02:52.875Z","avatar_url":"https://github.com/i18next.png","language":"TypeScript","funding_links":["https://github.com/sponsors/jamuhl","https://github.com/sponsors/adrai","https://locize.com"],"categories":["Extensions","TypeScript"],"sub_categories":[],"readme":"# next-i18next\n\n[![CircleCI](https://circleci.com/gh/i18next/next-i18next.svg?style=shield)](https://circleci.com/gh/i18next/next-i18next)\n[![Package Quality](https://npm.packagequality.com/shield/next-i18next.svg)](https://packagequality.com/#?package=next-i18next)\n[![npm version](https://img.shields.io/npm/v/next-i18next.svg?style=flat-square)](https://www.npmjs.com/package/next-i18next)\n![npm](https://img.shields.io/npm/dw/next-i18next)\n\n**The easiest way to translate your Next.js apps *(with pages setup)*.**\n\nIf you are using next-i18next *(pages directory)* in production and like to unleash some super powers, you may have a look at [this blog post](https://locize.com/blog/next-i18next/).\n[![](https://cdn.prod.website-files.com/67a323e323a50df7f24f0a94/67ab24f30259692f8593a923_next-i18next.jpg)](https://locize.com/blog/next-i18next/)\n\nIf you're using Next.js 13/14/15 with App Router, there is no need for next-i18next, you can directly use i18next and react-i18next, like described [in this blog post](https://www.locize.com/blog/i18n-next-app-router).\n[![](https://cdn.prod.website-files.com/67a323e323a50df7f24f0a94/67f268673fcfae53e5d4697c_i18n-next-app-router.jpg)](https://www.locize.com/blog/i18n-next-app-router)\n\n## What is this?\n\nAlthough Next.js [provides internationalised routing directly](https://nextjs.org/docs/advanced-features/i18n-routing), it does not handle any management of translation content, or the actual translation functionality itself. All Next.js does is keep your locales and URLs in sync.\n\nTo complement this, `next-i18next` provides the remaining functionality – management of translation content, and components/hooks to translate your React components – while fully supporting SSG/SSR, multiple [namespaces](https://www.i18next.com/principles/namespaces), codesplitting, etc.\n\nWhile `next-i18next` uses [i18next](https://www.i18next.com/) and [react-i18next](https://github.com/i18next/react-i18next) under the hood, users of `next-i18next` simply need to include their translation content as JSON files and don't have to worry about much else.\n\nA live demo is [available here](https://next.i18next.com/). This demo app is the [simple example](./examples/simple/) - nothing more, nothing less.\n\n## Why next-i18next?\n\nEasy to set up, easy to use: setup only takes a few steps, and configuration is simple.\n\nNo other requirements: `next-i18next` simplifies internationalisation for your [Next.js](https://nextjs.org/) app without extra dependencies.\n\nProduction ready: `next-i18next` supports passing translations and configuration options into pages as props with SSG/SSR support.\n\n## How does it work?\n\nYour `next-i18next.config.js` file will provide configuration for `next-i18next`.\nAfter configuration, `appWithTranslation` allows us to use the `t` (translate) function in our components via hooks.\n\nThen we add `serverSideTranslation` to [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) or [getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering) (depending on your case) in our page-level components.\n\nNow our Next.js app is fully translatable!\n\n## Setup\n\n### 1. Installation\n\n```bash\nyarn add next-i18next react-i18next i18next\n```\n\nYou need to also have `react` and `next` installed.\n\n### 2. Translation content\n\nBy default, `next-i18next` expects your translations to be organised as such:\n\n```\n.\n└── public\n    └── locales\n        ├── en\n        |   └── common.json\n        └── de\n            └── common.json\n```\n\nThis structure can also be seen in the [simple example](./examples/simple).\n\nIf you want to structure your translations/namespaces in a custom way, you will need to pass modified `localePath` and `localeStructure` values into the initialisation config.\n\n### 3. Project setup\n\nFirst, create a `next-i18next.config.js` file in the root of your project. The syntax for the nested `i18n` object [comes from Next.js directly](https://nextjs.org/docs/advanced-features/i18n-routing).\n\nThis tells `next-i18next` what your `defaultLocale` and other locales are, so that it can preload translations on the server:\n\n#### `next-i18next.config.js`\n\n```js\n/** @type {import('next-i18next').UserConfig} */\nmodule.exports = {\n  i18n: {\n    defaultLocale: 'en',\n    locales: ['en', 'de'],\n  },\n}\n```\n\nNow, create or modify your `next.config.js` file, by passing the `i18n` object into your `next.config.js` file, to enable localised URL routing:\n\n#### [`next.config.js`](https://nextjs.org/docs/api-reference/next.config.js/introduction)\n\n```js\nconst { i18n } = require('./next-i18next.config')\n\nmodule.exports = {\n  i18n,\n}\n```\n\nThere are three functions that `next-i18next` exports, which you will need to use to translate your project:\n\n#### appWithTranslation\n\nThis is a HOC which wraps your [`_app`](https://nextjs.org/docs/advanced-features/custom-app):\n\n```tsx\nimport { appWithTranslation } from 'next-i18next'\n\nconst MyApp = ({ Component, pageProps }) =\u003e (\n  \u003cComponent {...pageProps} /\u003e\n)\n\nexport default appWithTranslation(MyApp)\n```\n\nThe `appWithTranslation` HOC is primarily responsible for adding a [`I18nextProvider`](https://react.i18next.com/latest/i18nextprovider).\n\n#### serverSideTranslations\n\nThis is an async function that you need to include on your page-level components, via either [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) or [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering) (depending on your use case):\n\n```tsx\nimport { serverSideTranslations } from 'next-i18next/serverSideTranslations'\n\nexport async function getStaticProps({ locale }) {\n  return {\n    props: {\n      ...(await serverSideTranslations(locale, [\n        'common',\n        'footer',\n      ])),\n      // Will be passed to the page component as props\n    },\n  }\n}\n```\n\nNote that `serverSideTranslations` must be imported from `next-i18next/serverSideTranslations` – this is a separate module that contains NodeJs-specific code.\n\nAlso, note that `serverSideTranslations` is not compatible with `getInitialProps`, as it _only_ can execute in a server environment, whereas `getInitialProps` is called on the client side when navigating between pages.\n\nThe `serverSideTranslations` HOC is primarily responsible for passing translations and configuration options into pages, as props – you need to add it to any page that has translations.\n\n### useTranslation\n\nThis is the hook which you'll actually use to do the translation itself. The `useTranslation` hook [comes from `react-i18next`](https://react.i18next.com/latest/usetranslation-hook), but needs to be imported from `next-i18next` directly.\n\u003cbr/\u003e\n**Do NOT use the `useTranslation` export of `react-i18next`, but ONLY use the one from `next-i18next`!**\n\n```tsx\nimport { useTranslation } from 'next-i18next'\n\nexport const Footer = () =\u003e {\n  const { t } = useTranslation('footer')\n\n  return (\n    \u003cfooter\u003e\n      \u003cp\u003e{t('description')}\u003c/p\u003e\n    \u003c/footer\u003e\n  )\n}\n```\n\n### 4. Declaring namespace dependencies\n\nBy default, `next-i18next` will send _all your namespaces_ down to the client on each initial request. This can be an appropriate approach for smaller apps with less content, but a lot of apps will benefit from splitting namespaces based on route.\n\nTo do that, you can pass an array of required namespaces for each page into `serverSideTranslations`. You can see this approach in [examples/simple/pages/index.tsx](./examples/simple/pages/index.tsx). Passing in an empty array of required namespaces will send no namespaces.\n\nNote: `useTranslation` provides namespaces to the component that you use it in. However, `serverSideTranslations` provides the total available namespaces to the entire React tree and belongs on the page level. Both are required.\n\n### 5. Declaring locale dependencies\n\nBy default, `next-i18next` will send _only the active locale_ down to the client on each request. This helps reduce the size of the\ninitial payload sent to the client. However in some cases one may need the translations for other languages at runtime too. For example\nwhen using [getFixedT](https://www.i18next.com/overview/api#getfixedt) of `useTranslation` hook.\n\nTo change the behavior and load extra locales just pass in an array of locales as the last argument to `serverSideTranslations`.\n\n```diff\n  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';\n\n  export async function getStaticProps({ locale }) {\n    return {\n      props: {\n-       ...(await serverSideTranslations(locale, ['common', 'footer'])),\n+       ...(await serverSideTranslations(locale, ['common', 'footer'], null, ['en', 'no'])),\n      },\n    };\n  }\n```\n\nAs a result the translations for both `no` and `en` locales will always be loaded regardless of the current language.\n\n\u003e Note: The extra argument should be added to all pages that use `getFixedT` function.\n\n#### Fallback locales\n\nBy default, `next-i18next` will add the `defaultLocale` as fallback. To change this, you can set [`fallbackLng`](https://www.i18next.com/principles/fallback). All values supported by `i18next` (`string`, `array`, `object` and `function`) are supported by `next-i18next` too.\n\nAdditionally `nonExplicitSupportedLngs` can be set to `true` to support all variants of a language, without the need to provide JSON files for each of them. Notice that all variants still must be included in `locales` to enable routing within `next.js`.\n\n\u003e Note: `fallbackLng` and `nonExplicitSupportedLngs` can be used at once. There is only one exception: You can not use a function for `fallbackLng` when `nonExplicitSupportedLngs` is `true`,\n\n```js\nmodule.exports = {\n  i18n: {\n    defaultLocale: 'en',\n    locales: ['en', 'fr', 'de-AT', 'de-DE', 'de-CH'],\n  },\n  fallbackLng: {\n    default: ['en'],\n    'de-CH': ['fr'],\n  },\n  nonExplicitSupportedLngs: true,\n  // de, fr and en will be loaded as fallback languages for de-CH\n}\n```\n\nBe aware that using `fallbackLng` and `nonExplicitSupportedLngs` can easily increase the initial size of the page.\n\nfyi: Setting `fallbackLng` to `false` will NOT serialize your fallback language (usually `defaultLocale`). This will decrease the size of your initial page load.\n\n### 6. Advanced configuration\n\n#### Passing other config options\n\nIf you need to modify more advanced configuration options, you can pass them via `next-i18next.config.js`. For example:\n\n```js\nmodule.exports = {\n  i18n: {\n    defaultLocale: 'en',\n    locales: ['en', 'de'],\n  },\n  localePath:\n    typeof window === 'undefined'\n      ? require('path').resolve('./my-custom/path')\n      : '/public/my-custom/path',\n  ns: ['common'],\n}\n```\n\n#### Unserializable configs\n\nSome `i18next` plugins (which you can pass into `config.use`) are unserializable, as they contain functions and other JavaScript primitives.\n\nYou may run into this if your use case is more advanced. You'll see Next.js throw an error like:\n\n```\nError: Error serializing `._nextI18Next.userConfig.use[0].process` returned from `getStaticProps` in \"/my-page\".\nReason: `function` cannot be serialized as JSON. Please only return JSON serializable data types.\n```\n\nTo fix this, you'll need to set `config.serializeConfig` to `false`, and manually pass your config into `appWithTranslation`:\n\n```tsx\nimport { appWithTranslation } from 'next-i18next'\nimport nextI18NextConfig from '../next-i18next.config.js'\n\nconst MyApp = ({ Component, pageProps }) =\u003e (\n  \u003cComponent {...pageProps} /\u003e\n)\n\nexport default appWithTranslation(MyApp, nextI18NextConfig)\n```\n\n```tsx\nimport { serverSideTranslations } from 'next-i18next/serverSideTranslations'\n\nimport nextI18NextConfig from '../next-i18next.config.js'\n\nexport const getStaticProps = async ({ locale }) =\u003e ({\n  props: {\n    ...(await serverSideTranslations(\n      locale,\n      ['common', 'footer'],\n      nextI18NextConfig\n    )),\n  },\n})\n```\n\n#### Usage with fallback SSG pages \n\nWhen using on server-side generated pages with [`getStaticPaths`](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths) and [`fallback: true`](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-true) or [`fallback: 'blocking'`](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-blocking), the default setup indicated above will cause the app to be unmounted and remounted on every load, causing various adverse consequences like calling every `useEffect(() =\u003e {...}, [])` hook twice and slight performance degradation.\n\nThis is due to the fact that, for those pages, Next.js does a first render with empty `serverSideProps` and then a second render with the `serverSideProps` that include the `next-i18next` translations. With the default setup, the `i18n` instance is initially `undefined` when `serverSideProps` is `empty`, causing the unmount-remount.\n\nTo mitigate this issue, you can do the following:\n\n```tsx\nimport { UserConfig } from 'next-i18next';\nimport nextI18NextConfig from '../next-i18next.config.js'\n\nconst emptyInitialI18NextConfig: UserConfig = {\n  i18n: {\n    defaultLocale: nextI18NextConfig.i18n.defaultLocale,\n    locales: nextI18NextConfig.i18n.locales,\n  },\n};\n\nconst MyApp = ({ Component, pageProps }) =\u003e (\n  \u003cComponent {...pageProps} /\u003e\n)\n\nexport default appWithTranslation(MyApp, emptyInitialI18NextConfig) // Makes sure the initial i18n instance is not undefined\n```\n\nThis will work as long as you make sure that, in the fallback page state, your client-side code is not trying to display any translation since otherwise you will get a \"server-client mismatch\" error from Next.js (due to the fact that the server has an actual translation in its html while the client html has the translation key in the same place).   \nThis is normal and fine: you shouldn't be displaying a translation key to your user anyway!\n\n#### Client side loading of translations via HTTP\n\nSince [v11.0.0](https://github.com/i18next/next-i18next/releases/tag/v11.0.0) next-i18next also provides support for client side loading of translations.\n\nIn some use cases, you might want to load a translation file dynamically without having to use `serverSideTranslations`. This can be especially useful for lazy-loaded components that you don't want slowing down pages.\n\nMore information about that can be found [here](https://github.com/i18next/i18next-http-backend/tree/master/example/next).\n\n#### Reloading Resources in Development\n\nBecause resources are loaded once when the server is started, any changes made to your translation JSON files in development will not be loaded until the server is restarted.\n\nIn production this does not tend to be an issue, but in development you may want to see updates to your translation JSON files without having to restart your development server each time. To do this, set the `reloadOnPrerender` config option to `true`.\n\nThis option will reload your translations whenever `serverSideTranslations` is called (in `getStaticProps` or `getServerSideProps`). If you are using `serverSideTranslations` in `getServerSideProps`, it is recommended to disable `reloadOnPrerender` in production environments as to avoid reloading resources on each server call.\n\n#### Options\n\n| Key                 | Default value        | Note                                                           |\n| ------------------- | -------------------- | -------------------------------------------------------------- |\n| `defaultNS`         | `'common'`           |                                                                |\n| `localePath`        | `'./public/locales'` | Can be a function, see note below. (can also be null, if passing resources option directly via config, like [here](https://www.i18next.com/how-to/add-or-load-translations#add-on-init))                            |\n| `localeExtension`   | `'json'`             | Ignored if `localePath` is a function.                         |\n| `localeStructure`   | `'{{lng}}/{{ns}}'`   | Ignored if `localePath` is a function.                         |\n| `reloadOnPrerender` | `false`              |                                                                |\n| `serializeConfig`   | `true`               |                                                                |\n| `use` (for plugins) | `[]`                 |                                                                |\n| `onPreInitI18next`  | `undefined`          | i.e. `(i18n) =\u003e i18n.on('failedLoading', handleFailedLoading)` |\n\n`localePath` as a function is of the form `(locale: string, namespace: string, missing: boolean) =\u003e string` returning the entire path including filename and extension. When `missing` is true, return the path for the `addPath` option of `i18next-fs-backend`, when false, return the path for the `loadPath` option. [More info at the `i18next-fs-backend` repo.](https://github.com/i18next/i18next-fs-backend/tree/master#backend-options)\n\u003cbr /\u003e\nIf the localePath is a function, make sure you also define the ns option, because on server side we're not able to preload the namespaces then.\n\nAll other [i18next options](https://www.i18next.com/overview/configuration-options) and [react-i18next options](https://react.i18next.com/latest/i18next-instance) can be passed in as well.\n\u003c/br\u003e\nYou can also pass in the [`resources`](https://www.i18next.com/overview/configuration-options#languages-namespaces-resources) directly in combination with setting `localePath` to `null`.\n\n#### Custom interpolation prefix/suffix\n\nBy default, i18next uses `{{` as prefix and `}}` as suffix for [interpolation](https://www.i18next.com/translation-function/interpolation).\nIf you want/need to override these interpolation settings, you **must** also specify an alternative `localeStructure` setting that matches your custom prefix and suffix.\n\nFor example, if you want to use `{` and `}` the config would look like this:\n\n```js\n{\n  i18n: {\n    defaultLocale: 'en',\n    locales: ['en', 'nl'],\n  },\n  interpolation: {\n    prefix: '{',\n    suffix: '}',\n  },\n  localeStructure: '{lng}/{ns}',\n}\n```\n\n#### Custom `next-i18next.config.js` path\n\nIf you want to change the default config path, you can set the environment variable `I18NEXT_DEFAULT_CONFIG_PATH`.\n\nFor example, inside the `.env` file you can set a static path:\n\n```\nI18NEXT_DEFAULT_CONFIG_PATH=/path/to/project/apps/my-app/next-i18next.config.js\n```\n\nOr you can use a trick for dynamic path and set the following inside `next.config.js`:\n\n```js\nprocess.env.I18NEXT_DEFAULT_CONFIG_PATH = `${__dirname}/next-i18next.config.js`;\n\n// ... Some other imports\n\nconst { i18n } = require('./next-i18next.config');\n\n// ... Some other code\n\nmodule.exports = {\n  i18n,\n  ...\n};\n```\n\nThis means that the i18n configuration file will be in the same directory as `next.config.js` and it doesn't matter where your current working directory is. This helps for example for `nx` when you have monorepo and start your application from project root but the application is in `apps/{appName}`.\n\n**Notice** If your config `next-i18next.config.js` is not in the same directory as `next.config.js`, you must copy it manually (or by custom script).\n\n#### Adding next-i18next incrementally\n\nIf you are planning on incrementally add next-i18next to you project we recommended that you will pass your `next-i18next.config` to `appWithTranslation` to avoid any issues.\n\ni.e\n\n```js\nimport nextI18nextConfig from '../../next-i18next.config';\n//...\nexport default appWithTranslation(MyApp, nextI18nextConfig);\n```\n\nSee Issue [#2259](https://github.com/i18next/next-i18next/issues/2259) for more information.\n\n## Notes\n\n### Vercel and Netlify\n\nSome serverless PaaS may not be able to locate the path of your translations and require additional configuration. If you have filesystem issues using `serverSideTranslations`, set `config.localePath` to use `path.resolve`. An example can be [found here](https://github.com/i18next/next-i18next/issues/1552#issuecomment-1538452722).\n\n### Docker\n\nFor Docker deployment, note that if you use the `Dockerfile` from [Next.js docs](https://nextjs.org/docs/deployment#docker-image) do not forget to copy `next.config.js` and `next-i18next.config.js` into the Docker image.\n\n```\nCOPY --from=builder /app/next.config.js ./next.config.js\nCOPY --from=builder /app/next-i18next.config.js ./next-i18next.config.js\n```\n\n### Asynchronous i18next backends\n\nIf you choose to use an i18next backend different to the built-in [i18next-fs-backend](https://github.com/i18next/i18next-fs-backend), you will need to ensure the translation resources are loaded before you call the `t` function.\nSince [React suspense is not yet supported for SSR](https://github.com/i18next/next-i18next/issues/1255), this can be solved in 2 different ways:\n\n**1) Preload the namespaces:**\n\nSet the `ns` option, like in [this example](https://github.com/locize/next-i18next-locize/blob/main/next-i18next.config.js#L48). Doing this will ensure all translation resources are loaded on initialization.\n\n**2) Check the ready flag:**\n\nIf you cannot or do not want to provide the `ns` array, calls to the `t` function will cause namespaces to be loaded on the fly. This means you'll need to handle the \"not ready\" state by checking `ready === true` or `props.tReady === true`. Not doing so will result in rendering your translations before they loaded, which will cause \"save missing\" be called despite the translations actually existing (just yet not loaded).\nThis can be done with the [useTranslation hook](https://react.i18next.com/latest/usetranslation-hook#not-using-suspense) or the [withTranslation HOC](https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense).\n\n### Static HTML Export SSG\n\nAre you trying to generate a [static HTML export](https://nextjs.org/docs/advanced-features/static-html-export) by executing `next export` and are getting this error?\n\n\u003e Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment\n\nBut there's a way to workaround that with the help of [next-language-detector](https://github.com/i18next/next-language-detector).\nCheck out [this blog post](https://locize.com/blog/next-i18n-static/) and [this example project](./examples/ssg/).\n[![](https://cdn.prod.website-files.com/67a323e323a50df7f24f0a94/67a627037d01688d9ccb79dd_title%20(2).jpg)](https://locize.com/blog/next-i18n-static/)\n\n### Translate in child components\n\nYou have multiple ways to use the t function in your child component:\n\n1. Pass the `t` function via props down to the children\n2. Pass the translated text via props down to the children, like in this example: https://github.com/i18next/next-i18next/blob/master/examples/simple/components/Header.tsx#L12\n3. Use the [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) function, like in this example: https://github.com/i18next/next-i18next/blob/e6b5085b5e92004afa9516bd444b19b2c8cf5758/examples/simple/components/Footer.tsx#L6\n4. Use the [`withTranslation`](https://react.i18next.com/latest/withtranslation-hoc) function\n\n_And in general, you always needs to be sure serverSideTranslations contains all namespaces you need in the tree._\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/capellini\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/75311?v=4?s=100\" width=\"100px;\" alt=\"Rob Capellini\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRob Capellini\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/i18next/next-i18next/commits?author=capellini\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=capellini\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://en.kachkaev.ru\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/608862?v=4?s=100\" width=\"100px;\" alt=\"Alexander Kachkaev\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlexander Kachkaev\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#talk-kachkaev\" title=\"Talks\"\u003e📢\u003c/a\u003e \u003ca href=\"#question-kachkaev\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"#ideas-kachkaev\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=kachkaev\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=kachkaev\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://kandelborg.dk\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/33042011?v=4?s=100\" width=\"100px;\" alt=\"Mathias Wøbbe\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMathias Wøbbe\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/i18next/next-i18next/commits?author=MathiasKandelborg\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-MathiasKandelborg\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=MathiasKandelborg\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://lucasfeliciano.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/968014?v=4?s=100\" width=\"100px;\" alt=\"Lucas Feliciano\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLucas Feliciano\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-lucasfeliciano\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/pulls?q=is%3Apr+reviewed-by%3Alucasfeliciano\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://www.fifteenprospects.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6932550?v=4?s=100\" width=\"100px;\" alt=\"Ryan Leung\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRyan Leung\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/i18next/next-i18next/commits?author=minocys\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://nathanfriemel.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1325835?v=4?s=100\" width=\"100px;\" alt=\"Nathan Friemel\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNathan Friemel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/i18next/next-i18next/commits?author=nathanfriemel\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=nathanfriemel\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-nathanfriemel\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#ideas-nathanfriemel\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://isaachinman.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/10575782?v=4?s=100\" width=\"100px;\" alt=\"Isaac Hinman\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIsaac Hinman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#a11y-isaachinman\" title=\"Accessibility\"\u003e️️️️♿️\u003c/a\u003e \u003ca href=\"#question-isaachinman\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"#audio-isaachinman\" title=\"Audio\"\u003e🔊\u003c/a\u003e \u003ca href=\"#blog-isaachinman\" title=\"Blogposts\"\u003e📝\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/issues?q=author%3Aisaachinman\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#business-isaachinman\" title=\"Business development\"\u003e💼\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=isaachinman\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#content-isaachinman\" title=\"Content\"\u003e🖋\u003c/a\u003e \u003ca href=\"#data-isaachinman\" title=\"Data\"\u003e🔣\u003c/a\u003e \u003ca href=\"#design-isaachinman\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=isaachinman\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#eventOrganizing-isaachinman\" title=\"Event Organizing\"\u003e📋\u003c/a\u003e \u003ca href=\"#example-isaachinman\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#financial-isaachinman\" title=\"Financial\"\u003e💵\u003c/a\u003e \u003ca href=\"#fundingFinding-isaachinman\" title=\"Funding Finding\"\u003e🔍\u003c/a\u003e \u003ca href=\"#ideas-isaachinman\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#infra-isaachinman\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-isaachinman\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#mentoring-isaachinman\" title=\"Mentoring\"\u003e🧑‍🏫\u003c/a\u003e \u003ca href=\"#platform-isaachinman\" title=\"Packaging/porting to new platform\"\u003e📦\u003c/a\u003e \u003ca href=\"#plugin-isaachinman\" title=\"Plugin/utility libraries\"\u003e🔌\u003c/a\u003e \u003ca href=\"#projectManagement-isaachinman\" title=\"Project Management\"\u003e📆\u003c/a\u003e \u003ca href=\"#research-isaachinman\" title=\"Research\"\u003e🔬\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/pulls?q=is%3Apr+reviewed-by%3Aisaachinman\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#security-isaachinman\" title=\"Security\"\u003e🛡️\u003c/a\u003e \u003ca href=\"#talk-isaachinman\" title=\"Talks\"\u003e📢\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=isaachinman\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#tool-isaachinman\" title=\"Tools\"\u003e🔧\u003c/a\u003e \u003ca href=\"#translation-isaachinman\" title=\"Translation\"\u003e🌍\u003c/a\u003e \u003ca href=\"#tutorial-isaachinman\" title=\"Tutorials\"\u003e✅\u003c/a\u003e \u003ca href=\"#userTesting-isaachinman\" title=\"User Testing\"\u003e📓\u003c/a\u003e \u003ca href=\"#video-isaachinman\" title=\"Videos\"\u003e📹\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://locize.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1086194?v=4?s=100\" width=\"100px;\" alt=\"Adriano Raiano\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdriano Raiano\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#a11y-adrai\" title=\"Accessibility\"\u003e️️️️♿️\u003c/a\u003e \u003ca href=\"#question-adrai\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"#audio-adrai\" title=\"Audio\"\u003e🔊\u003c/a\u003e \u003ca href=\"#blog-adrai\" title=\"Blogposts\"\u003e📝\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/issues?q=author%3Aadrai\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#business-adrai\" title=\"Business development\"\u003e💼\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=adrai\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#content-adrai\" title=\"Content\"\u003e🖋\u003c/a\u003e \u003ca href=\"#data-adrai\" title=\"Data\"\u003e🔣\u003c/a\u003e \u003ca href=\"#design-adrai\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=adrai\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#eventOrganizing-adrai\" title=\"Event Organizing\"\u003e📋\u003c/a\u003e \u003ca href=\"#example-adrai\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#financial-adrai\" title=\"Financial\"\u003e💵\u003c/a\u003e \u003ca href=\"#fundingFinding-adrai\" title=\"Funding Finding\"\u003e🔍\u003c/a\u003e \u003ca href=\"#ideas-adrai\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#infra-adrai\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-adrai\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#mentoring-adrai\" title=\"Mentoring\"\u003e🧑‍🏫\u003c/a\u003e \u003ca href=\"#platform-adrai\" title=\"Packaging/porting to new platform\"\u003e📦\u003c/a\u003e \u003ca href=\"#plugin-adrai\" title=\"Plugin/utility libraries\"\u003e🔌\u003c/a\u003e \u003ca href=\"#projectManagement-adrai\" title=\"Project Management\"\u003e📆\u003c/a\u003e \u003ca href=\"#research-adrai\" title=\"Research\"\u003e🔬\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/pulls?q=is%3Apr+reviewed-by%3Aadrai\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#security-adrai\" title=\"Security\"\u003e🛡️\u003c/a\u003e \u003ca href=\"#talk-adrai\" title=\"Talks\"\u003e📢\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=adrai\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#tool-adrai\" title=\"Tools\"\u003e🔧\u003c/a\u003e \u003ca href=\"#translation-adrai\" title=\"Translation\"\u003e🌍\u003c/a\u003e \u003ca href=\"#tutorial-adrai\" title=\"Tutorials\"\u003e✅\u003c/a\u003e \u003ca href=\"#userTesting-adrai\" title=\"User Testing\"\u003e📓\u003c/a\u003e \u003ca href=\"#video-adrai\" title=\"Videos\"\u003e📹\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/felixmosh\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/9304194?v=4?s=100\" width=\"100px;\" alt=\"Felix Mosheev\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFelix Mosheev\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-felixmosh\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=felixmosh\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#talk-felixmosh\" title=\"Talks\"\u003e📢\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=felixmosh\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://soluble.io/pro\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/259798?v=4?s=100\" width=\"100px;\" alt=\"Sébastien Vanvelthem\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSébastien Vanvelthem\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/i18next/next-i18next/commits?author=belgattitude\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/i18next/next-i18next/commits?author=belgattitude\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-belgattitude\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#maintenance-belgattitude\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#userTesting-belgattitude\" title=\"User Testing\"\u003e📓\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n\n---\n\n\u003ch3 align=\"center\"\u003eGold Sponsors\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://locize.com/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/i18next/i18next/master/assets/locize_sponsor_240.gif\" width=\"240px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n**localization as a service - locize.com**\n\nNeeding a translation management? Want to edit your translations with an InContext Editor? Use the original provided to you by the maintainers of i18next!\n\n![locize](https://locize.com/img/ads/github_locize.png)\n\nWith using [locize](http://locize.com/?utm_source=next_i18next_readme\u0026utm_medium=github) you directly support the future of i18next and next-i18next.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi18next%2Fnext-i18next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi18next%2Fnext-i18next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi18next%2Fnext-i18next/lists"}