{"id":13468495,"url":"https://github.com/aralroca/next-translate","last_synced_at":"2026-04-02T18:02:18.241Z","repository":{"id":37545839,"uuid":"225569323","full_name":"aralroca/next-translate","owner":"aralroca","description":"Next.js plugin + i18n API for Next.js 🌍  -  Load page translations and use them in an easy way!","archived":false,"fork":false,"pushed_at":"2026-03-22T19:54:41.000Z","size":4394,"stargazers_count":2729,"open_issues_count":129,"forks_count":206,"subscribers_count":12,"default_branch":"canary","last_synced_at":"2026-03-22T21:47:45.071Z","etag":null,"topics":["globalization","hacktoberfest","i18n","localization","nextjs","plurals","preact","react","static-site","tiny","trans-component","treeshaking","usetranslation"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/aralroca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-12-03T08:33:18.000Z","updated_at":"2026-03-22T19:44:31.000Z","dependencies_parsed_at":"2023-02-13T19:50:42.104Z","dependency_job_id":"5b435485-ed96-4f0e-985a-2712f1381eaf","html_url":"https://github.com/aralroca/next-translate","commit_stats":{"total_commits":515,"total_committers":73,"mean_commits":7.054794520547945,"dds":"0.34174757281553403","last_synced_commit":"480e8aea6394813c47c8099291da1d258e7b1740"},"previous_names":["vinissimus/next-translate"],"tags_count":254,"template":false,"template_full_name":null,"purl":"pkg:github/aralroca/next-translate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fnext-translate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fnext-translate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fnext-translate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fnext-translate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aralroca","download_url":"https://codeload.github.com/aralroca/next-translate/tar.gz/refs/heads/canary","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fnext-translate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31312744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["globalization","hacktoberfest","i18n","localization","nextjs","plurals","preact","react","static-site","tiny","trans-component","treeshaking","usetranslation"],"created_at":"2024-07-31T15:01:12.220Z","updated_at":"2026-04-02T18:02:18.219Z","avatar_url":"https://github.com/aralroca.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Tools"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"images/logo.svg\" width=\"300\" alt=\"next-translate\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    Easy \u003cb\u003ei18n\u003c/b\u003e for Next.js +10\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003cb\u003eNext plugin\u003c/b\u003e + \u003cb\u003ei18n API\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm version](https://badge.fury.io/js/next-translate.svg)](https://badge.fury.io/js/next-translate)\n![npm](https://img.shields.io/npm/dw/next-translate)\n[![size](https://img.shields.io/bundlephobia/minzip/next-translate)](https://bundlephobia.com/package/next-translate)\n[![PRs Welcome][badge-prwelcome]][prwelcome]\n\u003ca href=\"https://github.com/aralroca/next-translate/actions?query=workflow%3ACI\" alt=\"Tests status\"\u003e\n\u003cimg src=\"https://github.com/aralroca/next-translate/workflows/CI/badge.svg\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=aralroca\"\u003e\n\u003cimg src=\"https://img.shields.io/twitter/follow/aralroca?style=social\u0026logo=x\"\n            alt=\"follow on Twitter\"\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cb\u003eSponsored by:\u003c/b\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://kitmul.com/en\"\u003e\n        \u003cimg src=\"images/kitmul-logo.svg\" width=\"200\" alt=\"Kitmul\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\n- [1. About next-translate](#1-about-next-translate)\n  - [How are translations loaded?](#how-are-translations-loaded)\n- [2. Getting started](#2-getting-started)\n  - [Install](#install)\n  - [Add next-translate plugin](#add-next-translate-plugin)\n  - [Add i18n.js config file](#add-i18njs-config-file)\n  - [Create your namespaces files](#create-your-namespaces-files)\n  - [Use translations in your pages](#use-translations-in-your-pages)\n- [3. Configuration](#3-configuration)\n- [4. API](#4-api)\n  - [useTranslation](#usetranslation)\n  - [createTranslation](#createtranslation)\n  - [withTranslation](#withtranslation)\n  - [Trans Component](#trans-component)\n  - [DynamicNamespaces](#dynamicnamespaces)\n  - [getT](#gett)\n  - [I18nProvider](#i18nprovider)\n  - [appWithI18n](#appwithi18n)\n  - [loadNamespaces](#loadnamespaces)\n- [5. Plurals](#5-plurals)\n- [6. Use HTML inside the translation](#6-use-html-inside-the-translation)\n- [7. Nested translations](#7-nested-translations)\n- [8. Fallbacks](#8-fallbacks)\n- [9. Formatter](#9-formatter)\n- [10. How to change the language](#10-how-to-change-the-language)\n- [11. How to save the user-defined language](#11-how-to-save-the-user-defined-language)\n- [12. How to use multi-language in a page](#12-how-to-use-multi-language-in-a-page)\n- [13. How to use next-translate in a mono-repo](#13-how-to-use-next-translate-in-a-mono-repo)\n- [14. Use Next 13 app directory](#14-use-next-13-app-directory)\n- [15. Demos](#15-demos)\n  - [Demo from Next.js](#demo-from-nextjs)\n  - [Basic demo](#basic-demo)\n  - [Complex demo](#complex-demo)\n  - [With app directory demo](#with-app-directory-demo)\n  - [Without the webpack loader demo](#without-the-webpack-loader-demo)\n- [Contributors ✨](#contributors-)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"images/translation-prerendered.gif\" alt=\"Translations in prerendered pages\" /\u003e\n\u003c/p\u003e\n\n## 1. About next-translate\n\nThe main goal of this library is to keep the translations as simple as possible in a Next.js environment.\n\nNext-translate has two parts: **Next.js plugin** + **i18n API**.\n\n**Features** ✨\n\n- 🚀  ・ Automatic page optimization (pages dir).\n- 🏝️  ・ React 18 server/client pages/components (app dir).\n- 🦄  ・ Easy to use and configure.\n- 🌍  ・ Basic i18n support: interpolation, plurals, useTranslation hook, Trans component...\n- 🈂️  ・ It loads only the necessary translations _(for page and for locale)_.\n- 📦  ・ Tiny (~1kb) and tree shakable. No dependencies.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"500\" src=\"images/bundle-size.png\" alt=\"Bundle size\" /\u003e\n\u003c/p\u003e\n\n### How are translations loaded?\n\nIn the configuration file, you specify each page that namespaces needs:\n\n**i18n.json**\n\n```js\n{\n  \"pages\": {\n    \"*\": [\"common\"],\n    \"/\": [\"home\"],\n    \"/cart\": [\"cart\"],\n    \"/content/[slug]\": [\"content\"],\n    \"rgx:^/account\": [\"account\"]\n  }\n  // rest of config here...\n}\n```\n\n_[Read here](#create-your-namespaces-files) about how to add the namespaces JSON files._\n\nNext-translate ensures that each page only has its namespaces with the current language. So if we have 100 locales, only 1 will be loaded.\n\nIn order to do this we use a **webpack loader** that loads the necessary translation files inside the Next.js methods (**getStaticProps**, **getServerSideProps** or **getInitialProps**). If you have one of these methods already on your page, the webpack loader will use your own method, but the defaults it will use are:\n\n- **`getStaticProps`**. This is the **default method used on most pages**, unless it is a page specified in the next two points. This is for performance, so the calculations are done in build time instead of request time.\n- **`getServerSideProps`**. This is the **default method for dynamic pages** like `[slug].js` or `[...catchall].js`. This is because for these pages it is necessary to define the `getStaticPaths` and there is no knowledge of how the slugs should be for each locale. Likewise, how is it by default, only that you write the getStaticPaths then it will already use the getStaticProps to load the translations.\n- **`getInitialProps`**. This is the **default method for these pages that use a HoC**. This is in order to avoid conflicts because HoC could overwrite a `getInitialProps`.\n\nThis **whole process is transparent**, so in your pages you can directly consume the `useTranslation` hook to use the namespaces, and you don't need to do anything else.\n\nIf for some reason you use a `getInitialProps` in your `_app.js` file, then the translations will only be loaded into your `getInitialProps` from `_app.js`. We recommend that for optimization reasons you don't use this approach unless it is absolutely necessary.\n\n## 2. Getting started\n\n### Install\n\n- `yarn add next-translate`\n\n### Add next-translate plugin\n\nThe `next-translate-plugin` is a tool that allows developers to efficiently handle translations on a page-by-page basis during the build process. It is distinct from the `next-translate` package, which allows developers to access the translations in the code where it is needed. The plugin works by parsing all pages, searching for the translations and rewriting the page file adding the translations to it. This makes the plugin a more efficient and flexible solution for handling translations within a Next.js application. It is recommended to install the plugin as a devDependency.\n\n- `yarn add next-translate-plugin -D`\n\nIn your **next.config.js** file:\n\n```js\nconst nextTranslate = require('next-translate-plugin')\n\nmodule.exports = nextTranslate()\n```\n\nOr if you already have **next.config.js** file and want to keep the changes in it, pass the config object to the `nextTranslate()`. For example for webpack you could do it like this:\n\n```js\nconst nextTranslate = require('next-translate-plugin')\n\nmodule.exports = nextTranslate({\n  webpack: (config, { isServer, webpack }) =\u003e {\n    return config;\n  }\n})\n```\n\n#### Using Turbopack (Next.js 16+)\n\nAs of **Next.js 16**, [Turbopack](https://turbo.build/pack) is enabled by default. Pass `{ turbopack: true }` as the second argument so that next-translate-plugin configures the Turbopack loader instead of the webpack one:\n\n```js\nconst nextTranslate = require('next-translate-plugin')\n\nmodule.exports = nextTranslate({}, { turbopack: true })\n```\n\nOr with your existing config:\n\n```js\nconst nextTranslate = require('next-translate-plugin')\n\n// Note: only available in Next.js +16 (for 15, you need to force a boolean, default false)\nconst isTurbopack = !process.argv.includes('--webpack')\n\nmodule.exports = nextTranslate(\n  {\n    // your Next.js config here\n  },\n  { turbopack: isTurbopack }\n)\n```\n\n\u003e **Note:** Omitting `{ turbopack: true }` when using Next.js 16+ with Turbopack will cause a startup error because the plugin would otherwise inject a webpack configuration that Turbopack doesn't accept.\n\n### Add i18n.js config file\n\nAdd a configuration file `i18n.json` _(or `i18n.js` with `module.exports`)_ in the root of the project. Each page should have its namespaces. Take a look at it in the [config](#3-configuration) section for more details.\n\n```json\n{\n  \"locales\": [\"en\", \"ca\", \"es\"],\n  \"defaultLocale\": \"en\",\n  \"pages\": {\n    \"*\": [\"common\"],\n    \"/\": [\"home\", \"example\"],\n    \"/about\": [\"about\"]\n  }\n}\n```\nIn the configuration file you can use both the configuration that we [specified here](#3-configuration) and the own [features about internationalization of Next.js 10](https://nextjs.org/docs/advanced-features/i18n-routing).\n\n\n### Create your namespaces files\n\nBy default the namespaces are specified on the **/locales** root directory in this way:\n\n**/locales**\n\n```bash\n.\n├── ca\n│   ├── common.json\n│   └── home.json\n├── en\n│   ├── common.json\n│   └── home.json\n└── es\n    ├── common.json\n    └── home.json\n```\n\nEach filename matches the namespace specified on the `pages` config property, while each file content should be similar to this:\n\n```json\n{\n  \"title\": \"Hello world\",\n  \"variable-example\": \"Using a variable {{count}}\"\n}\n```\n\nHowever, you can use another destination to save your namespaces files using [loadLocaleFrom](#3-configuration) configuration property:\n\n**i18n.js**\n\n```js\n{\n  // ...rest of config\n  \"loadLocaleFrom\": (lang, ns) =\u003e\n    // You can use a dynamic import, fetch, whatever. You should\n    // return a Promise with the JSON file.\n    import(`./myTranslationsFiles/${lang}/${ns}.json`).then((m) =\u003e m.default),\n}\n```\n\n### Use translations in your pages\n\nThen, use the translations in the page and its components:\n\n**pages/example.js**\n\n```jsx\nimport useTranslation from 'next-translate/useTranslation'\n\nexport default function ExamplePage() {\n  const { t, lang } = useTranslation('common')\n  const example = t('variable-example', { count: 42 })\n\n  return \u003cdiv\u003e{example}\u003c/div\u003e // \u003cdiv\u003eUsing a variable 42\u003c/div\u003e\n}\n```\n\nYou can consume the translations directly on your pages, you don't have to worry about loading the namespaces files manually on each page. The [next-translate plugin](#add-next-translate-plugin) loads only the namespaces that the page needs and only with the current language.\n\n## 3. Configuration\n\nIn the configuration file you can use both the configuration that we specified here and the own [features about internationalization of Next.js 10](https://nextjs.org/docs/advanced-features/i18n-routing).\n\n| Option            | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Type                            | Default                                                                         |\n| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- | ------------------------------------------------------------------------------- |\n| `defaultLocale`   | ISO of the default locale (\"en\" as default).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `string`                        | `\"en\"`                                                                          |\n| `locales`         | An array with all the languages to use in the project.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `string[]`                 | `[]`                                                                       |\n| `loadLocaleFrom`  | Change the way you load the namespaces.                                                                                                                                                                                                                                                                                                                                                                                                                        | `function` that returns a `Promise` with the `JSON`.                      | By default is loading the namespaces from **locales** root directory.                                                                          |\n| `pages`           | An object that defines the namespaces used in each page. Example of object: `{\"/\": [\"home\", \"example\"]}`. To add namespaces to all pages you should use the key `\"*\"`, ex: `{\"*\": [\"common\"]}`. It's also possible to use regex using `rgx:` on front: `{\"rgx:/form$\": [\"form\"]}`. You can also use a function instead of an array, to provide some namespaces depending on some rules, ex: `{ \"/\": ({ req, query }) =\u003e query.type === 'example' ? ['example'] : []}` | `Object\u003cstring[] or function\u003e` | `{}`                                                       |\n| `logger`          | Function to log the **missing keys** in development and production. If you are using `i18n.json` as config file you should change it to `i18n.js`.                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `function`                      | By default the logger is a function doing a `console.warn` only in development. |     |\n| `loggerEnvironment`          | String to define if the logger should run in the browser, in node or both                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `\"node\"` \u0026#124; `\"browser\"` \u0026#124; `\"both\"`                      | `\"browser\"` |     |\n| `logBuild`        | Each page has a log indicating: namespaces, current language and method used to load the namespaces. With this you can disable it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `Boolean`                       | `true`                                                                          |\n| `loader`        | If you wish to disable the webpack loader and manually load the namespaces on each page, we give you the opportunity to do so by disabling this option.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `Boolean`                       | `true`                                                                          |\n| `interpolation`   | Change the delimiter that is used for interpolation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `{prefix: string; suffix: string, formatter: function }` | `{prefix: '{{', suffix: '}}'}`\n| `keySeparator`   | Change the separator that is used for nested keys. Set to `false` to disable keys nesting in JSON translation files. Can be useful if you want to use natural text as keys.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string` \u0026#124; `false` | `'.'`\n| `nsSeparator`   | char to split namespace from key. You should set it to `false` if you want to use natural text as keys.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string` \u0026#124; `false` | `':'`\n| `defaultNS`   | default namespace used if not passed to `useTranslation` or in the translation key.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string` | `undefined`\n| `staticsHoc`   | The HOCs we have in our API ([appWithI18n](#appwithi18n)), do not use [hoist-non-react-statics](https://github.com/mridgway/hoist-non-react-statics) in order not to include more kb than necessary _(static values different than getInitialProps in the pages are rarely used)_. If you have any conflict with statics, you can add hoist-non-react-statics (or any other alternative) here. [See an example](docs/hoist-non-react-statics.md).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `Function` | `null`\n| `extensionsRgx`   | Change the regex used by the webpack loader to find Next.js pages. | `Regex` | `/\\.(tsx\\|ts\\|js\\|mjs\\|jsx)$/`\n| `revalidate`   | If you want to have a default revalidate on each page we give you the opportunity to do so by passing a number to revalidate. You can still define getStaticProps on a page with a different revalidate amount and override this default override. | `Number` | If you don't define it, by default the pages will have no revalidate.\n| `pagesInDir`   | If you run `next ./my-app` to change where your pages are, you can here define `my-app/pages` so that next-translate can guess where they are. | `String` | If you don't define it, by default the pages will be searched for in the classic places like `pages` and `src/pages`.\n| `localesToIgnore`   | Indicate these locales to ignore when you are prefixing the default locale using a middleware (in Next +12, [learn how to do it](https://nextjs.org/docs/advanced-features/i18n-routing#prefixing-the-default-locale)) | `Array\u003cstring\u003e` | `['default']`\n| `allowEmptyStrings`   | Change how translated empty strings should be handled. If omitted or passed as true, it returns an empty string. If passed as false, returns the key name itself (including ns). | `Boolean` | `true`\n\n**Plugin options** — passed as the second argument to `nextTranslate(config, pluginOptions)` in `next.config.js`:\n\n| Option       | Description                                                                                                                                              | Type      | Default |\n| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |\n| `turbopack`  | Set to `true` when using **Next.js 16+** (Turbopack enabled by default). The plugin will configure Turbopack rules instead of webpack, and will skip injecting the unsupported `i18n` key in the App Router. | `Boolean` | `false` |\n\n\n\n\n## 4. API\n\n### useTranslation\n\n**Size**: ~150b 📦\n\nThis hook is the recommended way to use translations in your pages / components.\n\n- **Input**: string - defaultNamespace (optional)\n- **Output**: Object { t: Function, lang: string }\n\nExample:\n\n```jsx\nimport React from 'react'\nimport useTranslation from 'next-translate/useTranslation'\n\nexport default function Description() {\n  const { t, lang } = useTranslation('ns1') // default namespace (optional)\n  const title = t('title')\n  const titleFromOtherNamespace = t('ns2:title')\n  const description = t`description` // also works as template string\n  const example = t('ns2:example', { count: 3 }) // and with query params\n  const exampleDefault = t('ns:example', { count: 3 }, { default: \"The count is: {{count}}.\" }) // and with default translation\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003e{title}\u003c/h1\u003e\n      \u003cp\u003e{description}\u003c/p\u003e\n      \u003cp\u003e{example}\u003c/p\u003e\n    \u003c\u003e\n  )\n}\n```\n\nThe `t` function:\n\n- **Input**:\n  - **i18nKey**: string (namespace:key)\n  - **query**: Object _(optional)_ (example: { name: 'Leonard' })\n  - **options**: Object _(optional)_\n    - **fallback**: string | string[] - fallback if i18nKey doesn't exist. [See more](#8-fallbacks).\n    - **returnObjects**: boolean - Get part of the JSON with all the translations. [See more](#7-nested-translations).\n    - **default**: string - Default translation for the key. If fallback keys are used, it will be used only after exhausting all the fallbacks.\n    - **ns**: string - Namespace to use when none is embded in the `i18nKey`.\n- **Output**: string\n\n### createTranslation\n\nSimilar than `useTranslation` but without being a hook. This helper **only works** in **app dir**.\n\n```ts\n  const { t, lang } = createTranslation('ns1') // default namespace (optional)\n  const title = t('title')\n```\n\n### withTranslation\n\n**Size**: ~560b 📦\n\nIt's an alternative to `useTranslation` hook, but in a HOC for these components that are no-functional. _(Not recommended, it's better to use the `useTranslation` hook.)_.\n\nThe `withTranslation` HOC returns a Component with an extra prop named `i18n` (Object { t: Function, lang: string }).\n\nExample:\n\n```jsx\nimport React from 'react'\nimport withTranslation from 'next-translate/withTranslation'\n\nclass Description extends React.Component {\n  render() {\n    const { t, lang } = this.props.i18n\n    const description = t('common:description')\n\n    return \u003cp\u003e{description}\u003c/p\u003e\n  }\n}\n\nexport default withTranslation(NoFunctionalComponent)\n```\n\nSimilar to `useTranslation(\"common\")` you can call `withTranslation` with the second parameter defining a default namespace to use:\n\n```\nexport default withTranslation(NoFunctionalComponent, \"common\")\n```\n\n### Trans Component\n\n**Size**: ~1.4kb 📦\n\nSometimes we need to do some translations with HTML inside the text (bolds, links, etc), the `Trans` component is exactly what you need for this. We recommend to use this component only in this case, for other cases we highly recommend the usage of `useTranslation` hook instead.\n\nExample:\n\n```jsx\n// The defined dictionary entry is like:\n// \"example\": \"\u003c0\u003eThe number is \u003c1\u003e{{count}}\u003c/1\u003e\u003c/0\u003e\",\n\u003cTrans\n  i18nKey=\"common:example\"\n  components={[\u003cComponent /\u003e, \u003cb className=\"red\" /\u003e]}\n  values={{ count: 42 }}\n/\u003e\n```\n\nOr using `components` prop as a object:\n\n```jsx\n// The defined dictionary entry is like:\n// \"example\": \"\u003ccomponent\u003eThe number is \u003cb\u003e{{count}}\u003c/b\u003e\u003c/component\u003e\",\n\u003cTrans\n  i18nKey=\"common:example\"\n  components={{\n    component: \u003cComponent /\u003e,\n    b: \u003cb className=\"red\" /\u003e,\n  }}\n  values={{ count: 42 }}\n  defaultTrans=\"\u003ccomponent\u003eThe number is \u003cb\u003e{{count}}\u003c/b\u003e\u003c/component\u003e\"\n/\u003e\n```\n\n- **Props**:\n  - `i18nKey` - string - key of i18n entry (namespace:key)\n  - `components` - Array\u003cNode\u003e | Object\u003cNode\u003e - In case of Array each index corresponds to the defined tag `\u003c0\u003e`/`\u003c1\u003e`. In case of object each key corresponds to the defined tag `\u003cexample\u003e`.\n  - `values` - Object - query params\n  - `fallback` - string | string[] - Optional. Fallback i18nKey if the i18nKey doesn't match.\n  - `defaultTrans` - string - Default translation for the key. If fallback keys are used, it will be used only after exhausting all the fallbacks.\n  - `ns` - Namespace to use when none is embedded in `i18nKey`\n  - `returnObjects` -  boolean - Get part of the JSON with all the translations. [See more](#7-nested-translations).\n\nIn cases where we require the functionality of the `Trans` component, but need a **string** to be interpolated, rather than the output of the `t(props.i18nKey)` function, there is also a `TransText` component, which takes a `text` prop instead of `i18nKey`.\n\n- **Props**:\n  - `text` - string - The string which (optionally) contains tags requiring interpolation\n  - `components` - Array | Object - This behaves exactly the same as `Trans` (see above).\n\nThis is especially useful when mapping over the output of a `t()` with `returnObjects: true`:\n```jsx\n// The defined dictionary entry is like:\n// \"content-list\": [\"List of \u003clink\u003ethings\u003c/link\u003e\", \"with \u003cem\u003etags\u003c/em\u003e\"]\nconst contentList = t('someNamespace:content-list', {}, { returnObjects: true });\n\n{contentList.map((listItem: string) =\u003e (\n  \u003cTransText\n    text={listItem}\n    components={{\n      link: \u003ca href=\"some-url\" /\u003e,\n      em: \u003cem /\u003e,\n    }}\n  /\u003e\n)}\n\n```\n\n### DynamicNamespaces\n\n**Size**: ~1.5kb 📦\n\nThe `DynamicNamespaces` component is useful to load dynamic namespaces, for example, in modals.\n\nExample:\n\n```jsx\nimport React from 'react'\nimport Trans from 'next-translate/Trans'\nimport DynamicNamespaces from 'next-translate/DynamicNamespaces'\n\nexport default function ExampleWithDynamicNamespace() {\n  return (\n    \u003cDynamicNamespaces namespaces={['dynamic']} fallback=\"Loading...\"\u003e\n      {/* ALSO IS POSSIBLE TO USE NAMESPACES FROM THE PAGE */}\n      \u003ch1\u003e\n        \u003cTrans i18nKey=\"common:title\" /\u003e\n      \u003c/h1\u003e\n\n      {/* USING DYNAMIC NAMESPACE */}\n      \u003cTrans i18nKey=\"dynamic:example-of-dynamic-translation\" /\u003e\n    \u003c/DynamicNamespaces\u003e\n  )\n}\n```\n\nRemember that `['dynamic']` namespace should **not** be listed on `pages` configuration:\n\n```js\n pages: {\n    '/my-page': ['common'], // only common namespace\n  }\n```\n\n**Using DynamicNamespaces with App Router (app directory)**\n\nIn the App Router, the `loadLocaleFrom` function from your `i18n.js` config is not available on the client side (it gets lost during RSC → Client Component serialization). You need to pass a `dynamic` prop with a loader function:\n\n```jsx\n'use client'\n\nimport DynamicNamespaces from 'next-translate/DynamicNamespaces'\nimport useTranslation from 'next-translate/useTranslation'\n\nconst loadLocaleFrom = (lang, ns) =\u003e\n  import(`../../../locales/${lang}/${ns}.json`).then((m) =\u003e m.default || m)\n\nfunction ToolContent() {\n  const { t } = useTranslation('tools/my-tool')\n  return \u003ch1\u003e{t('title')}\u003c/h1\u003e\n}\n\nexport default function MyComponent() {\n  return (\n    \u003cDynamicNamespaces\n      dynamic={loadLocaleFrom}\n      namespaces={['tools/my-tool']}\n      fallback=\"Loading...\"\n    \u003e\n      \u003cToolContent /\u003e\n    \u003c/DynamicNamespaces\u003e\n  )\n}\n```\n\n- **Props**:\n  - `namespaces` - string[] - list of dynamic namespaces to download - **Required**.\n  - `fallback`- ReactNode - Fallback to display meanwhile the namespaces are loading. - **Optional**.\n  - `dynamic` - function - By default it uses the [loadLocaleFrom](#3-configuration) in the configuration to load the namespaces, but you can specify another destination. - **Optional**.\n\n### getT\n\n**Size**: ~1.3kb 📦\n\nAsynchronous function to load the `t` function outside components / pages. It works on both server-side and client-side.\n\nUnlike the useTranslation hook, we can use here any namespace, it doesn't have to be a namespace defined in the \"pages\" configuration. It downloads the namespace indicated as a parameter on runtime.  \nYou can load multiple namespaces by giving an array as a parameter, in this case the default namespace will be the fist one.   \n\nExample inside `getStaticProps`:\n\n```js\nimport getT from 'next-translate/getT'\n// ...\nexport async function getStaticProps({ locale }) {\n  const t = await getT(locale, 'common')\n  const title = t('title')\n  return { props: { title } }\n}\n```\n\nExample inside API Route:\n\n```js\nimport getT from 'next-translate/getT'\n\nexport default async function handler(req, res) {\n  const t = await getT(req.query.__nextLocale, 'common')\n  const title = t('title')\n\n  res.statusCode = 200\n  res.setHeader('Content-Type', 'application/json')\n  res.end(JSON.stringify({ title }))\n}\n```\n\n\nExample of loading multiple namespaces:\n\n```js\nimport getT from 'next-translate/getT'\n\nexport default async function handler(req, res) {\n  const t = await getT(req.query.__nextLocale, ['common', 'errors'])\n  const title = t('title') // The default namespace is the first one.\n  const errorMessage = t('errors:app_error') // The default namespace is the first one.\n\n  res.statusCode = 200\n  res.setHeader('Content-Type', 'application/json')\n  res.end(JSON.stringify({ title }))\n}\n```\n\n### I18nProvider\n\n**Size**: ~3kb 📦\n\nThe `I18nProvider` is a context provider internally used by next-translate to provide the current **lang** and the page **namespaces**. **SO MAYBE YOU'LL NEVER NEED THIS**.\n\nHowever, it's exposed to the API because it can be useful in some cases. For example, to use multi-language translations in a page.\n\nThe `I18nProvider` is accumulating the namespaces, so you can rename the new ones in order to keep the old ones.\n\n```jsx\nimport React from 'react'\nimport I18nProvider from 'next-translate/I18nProvider'\nimport useTranslation from 'next-translate/useTranslation'\n\n// Import English common.json\nimport commonEN from '../../locales/en/common.json'\n\nfunction PageContent() {\n  const { t, lang } = useTranslation()\n\n  console.log(lang) // -\u003e current language\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e{t('common:example') /* Current language */}\u003c/p\u003e\n      \u003cp\u003e{t('commonEN:example') /* Force English */}\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default function Page() {\n  const { lang } = useTranslation()\n\n  return (\n    \u003cI18nProvider lang={lang} namespaces={{ commonEN }}\u003e\n      \u003cPageContent /\u003e\n    \u003c/I18nProvider\u003e\n  )\n}\n```\n\n### appWithI18n\n\n**Size**: ~3.7kb 📦\n\nThe `appWithI18n` is internally used by next-translate. **SO MAYBE YOU'LL NEVER NEED THIS**. However, we expose it in the API in case you disable the webpack [loader](#3-configuration) option and decide to load the namespaces manually.\n\nIf you wish not to use the webpack loader, then you should put this in your `_app.js` file (and create the `_app.js` file if you don't have it).\n\nExample:\n\n`_app.js`\n\n```jsx\nimport appWithI18n from 'next-translate/appWithI18n'\nimport i18nConfig from '../i18n'\n\nfunction MyApp({ Component, pageProps }) {\n  return \u003cComponent {...pageProps} /\u003e\n}\n\n// Wrapping your _app.js\nexport default appWithI18n(MyApp, {\n  ...i18nConfig,\n  // Set to false if you want to load all the namespaces on _app.js getInitialProps\n  skipInitialProps: true,\n})\n```\n\nIf `skipInitialProps=true`, then you should also use the [loadNamespaces](#loadnamespaces) helper to manually load the namespaces on each page.\n\n\n### loadNamespaces\n\n**Size**: ~1.9kb 📦\n\nThe `loadNamespaces` is internally used by next-translate. **SO MAYBE YOU'LL NEVER NEED THIS**. However, we expose it in the API in case you disable the webpack [loader](#3-configuration) option and decide to load the namespaces manually.\n\nTo load the namespaces, you must return in your pages the props that the helper provides.\n\n```js\nimport loadNamespaces from 'next-translate/loadNamespaces'\n\nexport function getStaticProps({ locale }) {\n  return {\n    props: {\n      ...(await loadNamespaces({ locale, pathname: '/about' })),\n    }\n  }\n}\n```\n🚨 To work well, it is necessary that your `_app.js` will be wrapped with the [appWithI18n](#appwithi18n). Also, the `loadLocaleFrom` configuration property is **mandatory** to define it.\n\n## 5. Plurals\n\nWe support 6 plural forms (taken from [CLDR Plurals](http://cldr.unicode.org/index/cldr-spec/plural-rules) page) by adding to the key this suffix (or nesting it under the key with no `_` prefix):\n\n- `_zero`\n- `_one` (singular)\n- `_two` (dual)\n- `_few` (paucal)\n- `_many` (also used for fractions if they have a separate class)\n- `_other` (required—general plural form—also used if the language only has a single form)\n\n_See more info about plurals [here](https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#sl)_.\n\nOnly the last one, **`_other`**, is required because it’s the only common plural form used in all locales.\n\nAll other plural forms depends on locale. For example English has only two: `_one` and `_other` (1 cat vs. 2 cats). Some languages have more, like Russian and Arabic.\n\nIn addition, we also support **an exact match** by specifying the number (`_0`, `_999`) and this works for all locales. Here is an example:\n\n\u003csmall\u003eCode:\u003c/small\u003e\n\n```js\n// **Note**: Only works if the name of the variable is {{count}}.\nt('cart-message', { count })\n```\n\n\u003csmall\u003eNamespace:\u003c/small\u003e\n\n```js\n{\n  \"cart-message_0\": \"The cart is empty\", // when count === 0\n  \"cart-message_one\": \"The cart has only {{count}} product\", // singular\n  \"cart-message_other\": \"The cart has {{count}} products\", // plural\n  \"cart-message_999\": \"The cart is full\", // when count === 999\n}\n```\n\nor\n\n```js\n{\n  \"cart-message\": {\n     \"0\": \"The cart is empty\", // when count === 0\n     \"one\": \"The cart has only {{count}} product\", // singular\n     \"other\": \"The cart has {{count}} products\", // plural\n     \"999\": \"The cart is full\", // when count === 999\n  }\n}\n```\n\n\u003e Intl.PluralRules API is **only available for modern browsers**, if you want to use it in legacy browsers you should add a [polyfill](https://github.com/eemeli/intl-pluralrules).\n\n\n## 6. Use HTML inside the translation\n\nYou can define HTML inside the translation this way:\n\n```json\n{\n  \"example-with-html\": \"\u003c0\u003eThis is an example \u003c1\u003eusing HTML\u003c/1\u003e inside the translation\u003c/0\u003e\"\n}\n```\n\nExample:\n\n```jsx\nimport Trans from 'next-translate/Trans'\n// ...\nconst Component = (props) =\u003e \u003cp {...props} /\u003e\n// ...\n\u003cTrans\n  i18nKey=\"namespace:example-with-html\"\n  components={[\u003cComponent /\u003e, \u003cb className=\"red\" /\u003e]}\n/\u003e\n```\n\nRendered result:\n\n```html\n\u003cp\u003eThis is an example \u003cb class=\"red\"\u003eusing HTML\u003c/b\u003e inside the translation\u003c/p\u003e\n```\n\nEach index of `components` array corresponds with `\u003cindex\u003e\u003c/index\u003e` of the definition.\n\nIn the `components` array, it's not necessary to pass the children of each element. Children will be calculated.\n\n## 7. Nested translations\n\nIn the namespace, it's possible to define nested keys like this:\n\n```json\n{\n  \"nested-example\": {\n    \"very-nested\": {\n      \"nested\": \"Nested example!\"\n    }\n  }\n}\n```\n\nIn order to use it, you should use \".\" as id separator:\n\n```js\nt`namespace:nested-example.very-nested.nested`\n```\n\nAlso is possible to use as array:\n\n```json\n{\n  \"array-example\": [\n    { \"example\": \"Example {{count}}\" },\n    { \"another-example\": \"Another example {{count}}\" }\n  ]\n}\n```\n\nAnd get all the array translations with the option `returnObjects`:\n\n```js\nt('namespace:array-example', { count: 1 }, { returnObjects: true })\n/*\n[\n  { \"example\": \"Example 1\" },\n  { \"another-example\": \"Another example 1\" }\n]\n*/\n```\n\nAlso it is possible to get all the translations by using the keySeparator as the key, default is `'.'` :  \n```js\nt('namespace:.', { count: 1 }, { returnObjects: true })\n/*\n{\n  \"array-example\": [\n    { \"example\": \"Example 1\" },\n    { \"another-example\": \"Another example 1\" }\n  ]\n}\n*/\n\n```\n\n### 8. Fallbacks\n\nIf no translation exists you can define fallbacks (`string|string[]`) to search for other translations:\n\n```js\nconst { t } = useTranslation()\nconst textOrFallback = t(\n  'ns:text',\n  { count: 1 },\n  {\n    fallback: 'ns:fallback',\n  }\n)\n```\n\nList of fallbacks:\n\n```js\nconst { t } = useTranslation()\nconst textOrFallback = t(\n  'ns:text',\n  { count: 42 },\n  {\n    fallback: ['ns:fallback1', 'ns:fallback2'],\n  }\n)\n```\n\nIn Trans Component:\n\n```jsx\n\u003cTrans\n  i18nKey=\"ns:example\"\n  components={[\u003cComponent /\u003e, \u003cb className=\"red\" /\u003e]}\n  values={{ count: 42 }}\n  fallback={['ns:fallback1', 'ns:fallback2']} // or string with just 1 fallback\n/\u003e\n```\n\n## 9. Formatter\n\nYou can format params using the `interpolation.format` config function.\n\nin `i18n.js`:\n\n```js\nconst formatters = {\n  es: new Intl.NumberFormat(\"es-ES\"),\n  en: new Intl.NumberFormat(\"en-EN\"),\n}\n\nreturn {\n  // ...\n  interpolation: {\n    format: (value, format, lang) =\u003e {\n      if(format === 'number') return formatters[lang].format(value)\n      return value\n    }\n  }\n}\n```\n\nIn English namespace:\n\n```json\n{\n  \"example\": \"The number is {{count, number}}\"\n}\n```\n\nIn Spanish namespace:\n\n```json\n{\n  \"example\": \"El número es {{count, number}}\"\n}\n```\n\nUsing:\n\n```js\nt('example', { count: 33.5 })\n```\n\nReturns:\n\n- In English: `The number is 33.5`\n- In Spanish: `El número es 33,5`\n\n## 10. How to change the language\n\nIn order to change the current language you can use the [Next.js navigation](https://nextjs.org/docs/advanced-features/i18n-routing) (Link and Router) passing the `locale` prop.\n\nAn example of a possible `ChangeLanguage` component using the `useRouter` hook from `Next.js`:\n\n```js\nimport React from 'react'\nimport Link from 'next/link'\nimport useTranslation from 'next-translate/useTranslation'\nimport i18nConfig from '../i18n.json'\n\nconst { locales } = i18nConfig\n\nexport default function ChangeLanguage() {\n  const { t, lang } = useTranslation()\n\n  return locales.map((lng) =\u003e {\n    if (lng === lang) return null\n\n    return (\n      \u003cLink href=\"/\" locale={lng} key={lng}\u003e\n        {t(`layout:language-name-${lng}`)}\n      \u003c/Link\u003e\n    )\n  })\n}\n```\n\nYou could also use `setLanguage` to change the language while keeping the same page.\n\n```js\nimport React from 'react'\nimport setLanguage from 'next-translate/setLanguage'\n\nexport default function ChangeLanguage() {\n  return (\n    \u003cbutton onClick={async () =\u003e await setLanguage('en')}\u003eEN\u003c/button\u003e\n  )\n}\n```\n\nAnother way of accessing the `locales` list to change the language is using the `Next.js router`. The `locales` list can be accessed using the [Next.js useRouter hook](https://nextjs.org/docs/api-reference/next/router#userouter).\n\n## 11. How to save the user-defined language\n\nYou can set a cookie named `NEXT_LOCALE` with the user-defined language as value, this way a locale can be forced.\n\nExample of hook:\n\n```js\nimport { useRouter } from 'next/router'\n\n// ...\n\nfunction usePersistLocaleCookie() {\n    const { locale, defaultLocale } = useRouter()\n\n    useEffect(persistLocaleCookie, [locale, defaultLocale])\n    function persistLocaleCookie() {\n      if(locale !== defaultLocale) {\n         const date = new Date()\n         const expireMs = 100 * 24 * 60 * 60 * 1000 // 100 days\n         date.setTime(date.getTime() + expireMs)\n         document.cookie = `NEXT_LOCALE=${locale};expires=${date.toUTCString()};path=/`\n      }\n    }\n}\n```\n\n## 12. How to use multi-language in a page\n\nIn some cases, when the page is in the current language, you may want to do some exceptions displaying some text in another language.\n\nIn this case, you can achieve this by using the `I18nProvider`.\n\nLearn how to do it [here](#i18nprovider).\n\n## 13. How to use next-translate in a mono-repo\n\nNext-translate uses by default the current working directory of the Node.js process (`process.cwd()`).\n\nIf you want to change it you can use :\n- the `NEXT_TRANSLATE_PATH` environment variable. It supports both relative and absolute path\n- the native NodeJS function `process.chdir(PATH_TO_NEXT_TRANSLATE)` to move the `process.cwd()`\n\n## 14. Use Next 13 app directory\n\nWhen it comes to server components and client components, it can be challenging to load the same thing on different pages. To simplify this process, we have **extracted all the complexity** using the **[`next-translate-plugin`](https://github.com/aralroca/next-translate-plugin)**.\n\nIf you're interested in learning more about how Next-translate works with the new Next.js 13 app dir paradigm, check out **[this article](https://dev.to/aralroca/i18n-translations-in-nextjs-13s-app-dir-for-serverclient-components-4ek8)** for a detailed explanation. \n\n### Regarding translations:\n\nIf you use the \"app\" folder instead of the \"pages\" folder, the `next-translate-plugin` will automatically detect the change, and you won't need to touch any of the Next-translate configuration. The only difference is that the \"pages\" configuration property will reference the pages located within the \"app\" folder.\n\n**i18n.js**\n```js\nmodule.exports = {\n  locales: ['en', 'ca', 'es'],\n  defaultLocale: 'en',\n  pages: {\n    '*': ['common'],\n    '/': ['home'], // app/page.tsx\n    '/second-page': ['home'], // app/second-page/page.tsx\n  },\n}\n```\n\nBy simply changing the \"pages\" folder to \"app,\" you can consume translations within your pages using the **`useTranslation`** hook or the **`Trans`** component. You will still see the log (if enabled) to know which namespaces are loaded on each page, and everything else should be the same.\n\n**🌊 Server page/component (+0kb): `app/page.js`:**\n```js\nimport useTranslation from 'next-translate/useTranslation'\n\nexport default function HomePage() {\n  const { t, lang } = useTranslation('home')\n\n  return \u003ch1\u003e{t('title')}\u003c/h1\u003e\n}\n```\n\n**🏝️ Client page/component (+498B): `app/checkout/page.js`**\n```js\n\"use client\"\nimport useTranslation from 'next-translate/useTranslation'\n\nexport default function CheckoutPage() {\n  const { t, lang } = useTranslation('checkout')\n\n  return \u003ch1\u003e{t('title')}\u003c/h1\u003e\n}\n```\n\n### Regarding routing:\n\nNext.js 10 introduced [i18n routing](https://nextjs.org/docs/advanced-features/i18n-routing) support, allowing pages to be rendered by navigating to `/es/page-name`, where the page `pages/page-name.js` was accessed using the `useRouter` hook to obtain the `locale`. \n\nHowever, since the pages have been moved from the `pages` dir to the **app dir**, this i18n routing **no longer works correctly**.\n\nAt Next-translate, we have chosen not to re-implement this functionality, as we aim to be a library for translating pages, rather than routing them. We hope that in the future, this feature will be implemented in the `app` directory.\n\n**We recommend the following:**\n\n- Add the dynamic path `[lang]` to the first level. That is, all your pages will be inside `/app/[lang]`.\n- If you need more control over which languages to support, or to detect the browser language, use the [middleware](https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview) that the Next.js team [recommends here](https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview).\n- Update all the pages inside `i18n.(js|json)` file to contain the `/[lang]` at the beginning.\n\n```diff\nmodule.exports = {\n  locales: ['en', 'ca', 'es'],\n  defaultLocale: 'en',\n  pages: {\n    '*': ['common'],\n-    '/': ['home'],\n+    '/[lang]': ['home'],\n-    '/second-page': ['home'],\n+    '/[lang]/second-page': ['home'],\n  },\n}\n```\n\n### Using Turbopack with app directory (Next.js 16+)\n\nWhen using the app directory with **Next.js 16+** (which defaults to Turbopack), you must pass `{ turbopack: true }` to the plugin:\n\n```js\n// next.config.js\nconst nextTranslate = require('next-translate-plugin')\n\n// Note: only available in Next.js +16 (for 15, you need to force a boolean, default false)\nconst isTurbopack = !process.argv.includes('--webpack')\n\nmodule.exports = nextTranslate({}, { turbopack: isTurbopack })\n```\n\nThis is required because:\n- Turbopack does **not** accept webpack configuration, so the plugin must be told to emit Turbopack rules instead.\n- The `i18n` key in `next.config.js` is **not supported** in the App Router — the plugin automatically skips adding it when using the app directory.\n\nAt Next-translate level we **already detect the language automatically** according to `searchParams.get('lang')` and `params.lang`. So you **don't need to configure it for each page**, you can use `next-translate` as **normal** within the server/client pages/components:\n\n```js\nimport useTranslation from 'next-translate/useTranslation'\nimport Trans from 'next-translate/Trans'\n\nexport default function Page() {\n  const { t, lang } = useTranslation('common')\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003e{t`title`}\u003c/h1\u003e\n      \u003cTrans i18nKey=\"common:another-text\" components={[\u003cb /\u003e]} /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n\n## 15. Demos\n\n### Demo from Next.js\n\nThere is a demo of `next-translate` on the Next.js repo:\n\n- https://github.com/vercel/next.js/tree/master/examples/with-next-translate\n\nTo use it:\n\n```bash\nnpx create-next-app --example with-next-translate with-next-translate-app\n# or\nyarn create next-app --example with-next-translate with-next-translate-app\n```\n\n### Basic demo\n\nThis demo is in this repository:\n\n- `git clone git@github.com:aralroca/next-translate.git`\n- `cd next-translate`\n- `yarn \u0026\u0026 yarn example:basic`\n\n### Complex demo\n\nSimilar than the basic demo but with some extras: TypeScript, Webpack 5, MDX, with _app.js on top, pages located on src/pages folder, loading locales from src/translations with a different structure.\n\nThis demo is in this repository:\n\n- `git clone git@github.com:aralroca/next-translate.git`\n- `cd next-translate`\n- `yarn \u0026\u0026 yarn example:complex`\n\n### With app directory demo\n\nSimilar than the complex demo but with some extra: Instead of `pages` folder, we are using the Next.js +13 [app folder with the new layouts system](https://nextjs.org/blog/next-13#new-app-directory-beta).\n\nThis demo is in this repository:\n\n- `git clone git@github.com:aralroca/next-translate.git`\n- `cd next-translate`\n- `yarn \u0026\u0026 yarn example:with-app-directory`\n\n### Without the webpack loader demo\n\nSimilar than the basic example but loading the page namespaces manually deactivating the webpack loader in the i18n.json config file.\n\n\u003e We do not recommend that it be used in this way. However we give the opportunity for anyone to do so if they are not comfortable with our webpack loader.\n\nThis demo is in this repository:\n\n- `git clone git@github.com:aralroca/next-translate.git`\n- `cd next-translate`\n- `yarn \u0026\u0026 yarn example:without-loader`\n\n[badge-prwelcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prwelcome]: http://makeapullrequest.com\n[spectrum]: https://spectrum.chat/next-translate\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/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://aralroca.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/13313058?v=4\u0026s=100\" width=\"100px;\" alt=\"Aral Roca Gomez\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAral Roca Gomez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://aralroca.com\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://aralroca.com\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://twitter.com/vincentducorps\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/6338609?v=4\u0026s=100\" width=\"100px;\" alt=\"Vincent Ducorps\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVincent Ducorps\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://twitter.com/vincentducorps\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.rahwn.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/36173920?v=4\u0026s=100\" width=\"100px;\" alt=\"Björn Rave\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBjörn Rave\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://www.rahwn.com\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/justincy\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1037458?v=4\u0026s=100\" width=\"100px;\" alt=\"Justin\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJustin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/justincy\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/psanlorenzo\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/42739235?v=4\u0026s=100\" width=\"100px;\" alt=\"Pol\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePol\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/psanlorenzo\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://twitter.com/ftonato\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/5417662?v=4\u0026s=100\" width=\"100px;\" alt=\"Ademílson F. Tonato\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdemílson F. Tonato\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://twitter.com/ftonato\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Faulik\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/749225?v=4\u0026s=100\" width=\"100px;\" alt=\"Faul\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFaul\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Faulik\" title=\"Code\"\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://github.com/bickmaev5\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/13235737?v=4\u0026s=100\" width=\"100px;\" alt=\"bickmaev5\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ebickmaev5\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/bickmaev5\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://p.ier.re\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1866496?v=4\u0026s=100\" width=\"100px;\" alt=\"Pierre Grimaud\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePierre Grimaud\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://p.ier.re\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://roman-minchyn.de\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/6419697?v=4\u0026s=100\" width=\"100px;\" alt=\"Roman Minchyn\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRoman Minchyn\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://roman-minchyn.de\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://roman-minchyn.de\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.egorphilippov.me/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/595980?v=4\u0026s=100\" width=\"100px;\" alt=\"Egor\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEgor\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://www.egorphilippov.me/\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/dhobbs\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/367375?v=4\u0026s=100\" width=\"100px;\" alt=\"Darren\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDarren\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dhobbs\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/giovannigiordano\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/15145952?v=4\u0026s=100\" width=\"100px;\" alt=\"Giovanni Giordano\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGiovanni Giordano\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/giovannigiordano\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/kidnapkin\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/9214135?v=4\u0026s=100\" width=\"100px;\" alt=\"Eugene\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEugene\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kidnapkin\" title=\"Code\"\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://andrew-c.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/11482515?v=4\u0026s=100\" width=\"100px;\" alt=\"Andrew Chung\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrew Chung\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://andrew-c.com\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://cuthanh.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/9281080?v=4\u0026s=100\" width=\"100px;\" alt=\"Thanh Minh\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eThanh Minh\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"http://cuthanh.com\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/croutonn\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/68943932?v=4\u0026s=100\" width=\"100px;\" alt=\"crouton\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ecrouton\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/croutonn\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://patrickmuff.ch\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/3121902?v=4\u0026s=100\" width=\"100px;\" alt=\"Patrick\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePatrick\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"http://patrickmuff.ch\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/vimutti77\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/27840664?v=4\u0026s=100\" width=\"100px;\" alt=\"Vantroy\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVantroy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vimutti77\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.npmjs.com/~farinajoey\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/17398284?v=4\u0026s=100\" width=\"100px;\" alt=\"Joey\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJoey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://www.npmjs.com/~farinajoey\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/gurkerl83\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/301689?v=4\u0026s=100\" width=\"100px;\" alt=\"gurkerl83\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003egurkerl83\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/gurkerl83\" title=\"Code\"\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://github.com/tperamaki\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/26067988?v=4\u0026s=100\" width=\"100px;\" alt=\"Teemu Perämäki\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTeemu Perämäki\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/tperamaki\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/luisgserrano\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2024164?v=4\u0026s=100\" width=\"100px;\" alt=\"Luis Serrano\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuis Serrano\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/luisgserrano\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/j-schumann\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/114239?v=4\u0026s=100\" width=\"100px;\" alt=\"j-schumann\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ej-schumann\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/j-schumann\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/andrehsu\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4470828?v=4\u0026s=100\" width=\"100px;\" alt=\"Andre Hsu\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndre Hsu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/andrehsu\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/slevy85\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/18260229?v=4\u0026s=100\" width=\"100px;\" alt=\"slevy85\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eslevy85\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/slevy85\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.berndartmueller.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/761018?v=4\u0026s=100\" width=\"100px;\" alt=\"Bernd Artmüller\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBernd Artmüller\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://www.berndartmueller.com\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/rihardssceredins\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/23099574?v=4\u0026s=100\" width=\"100px;\" alt=\"Rihards Ščeredins\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRihards Ščeredins\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/rihardssceredins\" title=\"Code\"\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://its-just-nans.github.io\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/56606507?v=4\u0026s=100\" width=\"100px;\" alt=\"n4n5\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003en4n5\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://its-just-nans.github.io\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://rubenmoya.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/905225?v=4\u0026s=100\" width=\"100px;\" alt=\"Rubén Moya\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRubén Moya\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://rubenmoya.dev\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/testerez\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/815236?v=4\u0026s=100\" width=\"100px;\" alt=\"Tom Esterez\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTom Esterez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testerez\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://www.dan-needham.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1122983?v=4\u0026s=100\" width=\"100px;\" alt=\"Dan Needham\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDan Needham\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"http://www.dan-needham.com\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"http://www.dan-needham.com\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"http://www.dan-needham.com\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.youtube.com/BrunoAntunesPT\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/9042965?v=4\u0026s=100\" width=\"100px;\" alt=\"Bruno Antunes\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBruno Antunes\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://www.youtube.com/BrunoAntunesPT\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/kaan-atakan\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/56063979?v=4\u0026s=100\" width=\"100px;\" alt=\"Kaan Atakan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKaan Atakan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kaan-atakan\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/groomain\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/3601848?v=4\u0026s=100\" width=\"100px;\" alt=\"Romain\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRomain\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/groomain\" title=\"Code\"\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=\"http://ajb.cat\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/57961822?v=4\u0026s=100\" width=\"100px;\" alt=\"Arnau Jiménez\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eArnau Jiménez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"http://ajb.cat\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/edwinveldhuizen\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1787915?v=4\u0026s=100\" width=\"100px;\" alt=\"Edwin Veldhuizen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEdwin Veldhuizen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/edwinveldhuizen\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://dviet.de\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/40763918?v=4\u0026s=100\" width=\"100px;\" alt=\"Duc Ngo Viet\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDuc Ngo Viet\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"http://dviet.de\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/bilLkarkariy\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/43569083?v=4\u0026s=100\" width=\"100px;\" alt=\"Billel Helali\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBillel Helali\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/bilLkarkariy\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/wuifdesign\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5678318?v=4\u0026s=100\" width=\"100px;\" alt=\"Wuif\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWuif\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/wuifdesign\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://michal.bar\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/9134970?v=4\u0026s=100\" width=\"100px;\" alt=\"Michał Bar\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichał Bar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://michal.bar\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/marcesengel\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6208890?v=4\u0026s=100\" width=\"100px;\" alt=\"Marces Engel\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarces Engel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/marcesengel\" title=\"Code\"\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://github.com/Dragate\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/28112929?v=4\u0026s=100\" width=\"100px;\" alt=\"Dragate\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDragate\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Dragate\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/vascosilvaa\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16561642?v=4\u0026s=100\" width=\"100px;\" alt=\"Vasco Silva\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVasco Silva\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vascosilvaa\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/StLyn4\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/73965070?v=4\u0026s=100\" width=\"100px;\" alt=\"Vsevolod Volkov\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVsevolod Volkov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/StLyn4\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/felixonmars\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1006477?v=4\u0026s=100\" width=\"100px;\" alt=\"Felix Yan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFelix Yan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/felixonmars\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/alziqziq\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/29282122?v=4\u0026s=100\" width=\"100px;\" alt=\"Muhammad Al Ziqri\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMuhammad Al Ziqri\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/alziqziq\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://teka.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4443094?v=4\u0026s=100\" width=\"100px;\" alt=\"Marcelo Oliveira\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarcelo Oliveira\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"http://teka.dev\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/SimplyComplexable\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8563846?v=4\u0026s=100\" width=\"100px;\" alt=\"Zack Sunderland\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eZack Sunderland\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/SimplyComplexable\" title=\"Code\"\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=\"http://andrewovens.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/107420510?v=4\u0026s=100\" width=\"100px;\" alt=\"Andrew Ovens\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrew Ovens\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"http://andrewovens.com\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/danielpid\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16427301?v=4\u0026s=100\" width=\"100px;\" alt=\"dANi\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003edANi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/danielpid\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://thematrixan.github.io/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/28862367?v=4\u0026s=100\" width=\"100px;\" alt=\"Mateusz Lesiak\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMateusz Lesiak\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://thematrixan.github.io/\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Curetix\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/15160542?v=4\u0026s=100\" width=\"100px;\" alt=\"Curetix\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCuretix\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Curetix\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/crs1138\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1313681?v=4\u0026s=100\" width=\"100px;\" alt=\"Honza\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHonza\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/crs1138\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/BandhiyaHardik\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/110784317?v=4\u0026s=100\" width=\"100px;\" alt=\"HardikBandhiya\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHardikBandhiya\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/BandhiyaHardik\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.linkedin.com/in/timotew/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/12928383?v=4\u0026s=100\" width=\"100px;\" alt=\"Tim O. Peters\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTim O. Peters\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://www.linkedin.com/in/timotew/\" title=\"Code\"\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://github.com/hydRAnger\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1228449?v=4\u0026s=100\" width=\"100px;\" alt=\"Li Ming\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLi Ming\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/hydRAnger\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/acidfernando\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/86410308?v=4\u0026s=100\" width=\"100px;\" alt=\"Fernando García Hernández\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFernando García Hernández\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/acidfernando\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.hichemfantar.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/34947993?v=4\u0026s=100\" width=\"100px;\" alt=\"Hichem Fantar\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHichem Fantar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://www.hichemfantar.com/\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/huseyinonalcom\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/65453275?v=4\u0026s=100\" width=\"100px;\" alt=\"Huseyin Onal\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHuseyin Onal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/huseyinonalcom\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/jessemartin\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1626240?v=4\u0026s=100\" width=\"100px;\" alt=\"Jesse Martin\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJesse Martin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jessemartin\" title=\"Code\"\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/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faralroca%2Fnext-translate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faralroca%2Fnext-translate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faralroca%2Fnext-translate/lists"}