{"id":13624432,"url":"https://github.com/microapps/gatsby-plugin-react-i18next","last_synced_at":"2025-04-04T12:09:27.937Z","repository":{"id":37884693,"uuid":"266288237","full_name":"microapps/gatsby-plugin-react-i18next","owner":"microapps","description":"Easily translate your Gatsby website into multiple languages","archived":false,"fork":false,"pushed_at":"2024-01-19T16:03:52.000Z","size":2799,"stargazers_count":120,"open_issues_count":80,"forks_count":70,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T11:11:09.152Z","etag":null,"topics":["gatsby","gatsby-component","gatsby-i18n","gatsby-plugin","gatsbyjs","i18n","i18next","react","react-i18next"],"latest_commit_sha":null,"homepage":"","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/microapps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2020-05-23T07:48:39.000Z","updated_at":"2025-01-03T17:04:23.000Z","dependencies_parsed_at":"2024-01-14T08:21:48.688Z","dependency_job_id":"c2d4cc7c-0b99-40f9-a461-cb33adb40fb2","html_url":"https://github.com/microapps/gatsby-plugin-react-i18next","commit_stats":{"total_commits":193,"total_committers":32,"mean_commits":6.03125,"dds":0.2901554404145078,"last_synced_commit":"0cb31fe4e48dd5b1771efaf24c85ece5540aa084"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microapps%2Fgatsby-plugin-react-i18next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microapps%2Fgatsby-plugin-react-i18next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microapps%2Fgatsby-plugin-react-i18next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microapps%2Fgatsby-plugin-react-i18next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microapps","download_url":"https://codeload.github.com/microapps/gatsby-plugin-react-i18next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174454,"owners_count":20896078,"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":["gatsby","gatsby-component","gatsby-i18n","gatsby-plugin","gatsbyjs","i18n","i18next","react","react-i18next"],"created_at":"2024-08-01T21:01:42.523Z","updated_at":"2025-04-04T12:09:27.914Z","avatar_url":"https://github.com/microapps.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# gatsby-plugin-react-i18next\n\nEasily translate your Gatsby website into multiple languages.\n\n## Features\n\n- Seamless integration with [react-i18next](https://react.i18next.com/) - a powerful internationalization framework for React.\n- Code splitting. Load translations for each page separately.\n- Automatic redirection based on the user's preferred language in browser provided by [browser-lang](https://github.com/wiziple/browser-lang).\n- Support multi-language url routes in a single page component. You don't have to create separate pages such as `pages/en/index.js` or `pages/es/index.js`.\n- SEO friendly\n- Support for [gatsby-plugin-layout](https://www.gatsbyjs.org/packages/gatsby-plugin-layout/)\n\n## Why?\n\nWhen you build multilingual sites, Google recommends using different URLs for each language version of a page rather than using cookies or browser settings to adjust the content language on the page. [(read more)](https://support.google.com/webmasters/answer/182192?hl=en\u0026ref_topic=2370587)\n\n## :boom: Breaking change since v2.0.0\n\nAs of V2.0.0, this plugin only supports Gatsby 4.16.0+ and React 18+.\n\n## :boom: Breaking change since v1.0.0\n\nAs of v1.0.0, language JSON resources should be loaded by `gatsby-source-filesystem` plugin and then fetched by GraphQL query. It enables incremental build and hot-reload as language JSON files change.\n\nUsers who have loaded language JSON files using `path` option will be affected. Please check configuration example on below.\n\n## Demo\n\n- [View demo online](https://kind-lichterman-5edcb4.netlify.app/)\n- [Source code](/example)\n\n## Used by\n\n- [monei.com](https://monei.com/) - The digital payment gateway with best rates.\n- [moonmail.io](https://moonmail.io/) - OmniChannel Communication Platform used by more than 100,000 businesses worldwide.\n- [nyxo.app](https://nyxo.app) – Sleep tracking and coaching [(source code)](https://github.com/hello-nyxo/nyxo-website)\n\n### Tutorials\n\n- [Best internationalization for Gatsby](https://dev.to/adrai/best-internationalization-for-gatsby-mkf) by Adriano Raiano\n\n## How to use\n\n### Install package\n\n```\nyarn add gatsby-plugin-react-i18next i18next react-i18next\n```\n\nor\n\n```\nnpm install --save gatsby-plugin-react-i18next i18next react-i18next\n```\n\n### Configure the plugin\n\n```javascript\n// In your gatsby-config.js\nplugins: [\n  {\n    resolve: `gatsby-source-filesystem`,\n    options: {\n      path: `${__dirname}/locales`,\n      name: `locale`\n    }\n  },\n  {\n    resolve: `gatsby-plugin-react-i18next`,\n    options: {\n      localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.\n      languages: [`en`, `es`, `de`],\n      defaultLanguage: `en`,\n      siteUrl: `https://example.com`,\n      // if you are using trailingSlash gatsby config include it here, as well (the default is 'always')\n      trailingSlash: 'always',\n      // you can pass any i18next options\n      i18nextOptions: {\n        interpolation: {\n          escapeValue: false // not needed for react as it escapes by default\n        },\n        keySeparator: false,\n        nsSeparator: false\n      },\n      pages: [\n        {\n          matchPath: '/:lang?/blog/:uid',\n          getLanguageFromPath: true,\n          excludeLanguages: ['es']\n        },\n        {\n          matchPath: '/preview',\n          languages: ['en']\n        }\n      ]\n    }\n  }\n];\n```\n\nThis example is not using semantic keys instead the entire message will be used as a key. [Read more](https://www.i18next.com/principles/fallback#key-fallback).\n\n**NOTE:** If you want nested translation keys do not set `keySeparator: false`. [More configuration options](https://www.i18next.com/overview/configuration-options).\n\n### You'll also need to add language JSON resources to the project.\n\nFor example,\n\n| language resource files                                                                                                      | language |\n| ---------------------------------------------------------------------------------------------------------------------------- | -------- |\n| [/locales/en/index.json](https://github.com/microapps/gatsby-plugin-react-i18next/blob/master/example/locales/en/index.json) | English  |\n| [/locales/es/index.json](https://github.com/microapps/gatsby-plugin-react-i18next/blob/master/example/locales/es/index.json) | Spanish  |\n| [/locales/de/index.json](https://github.com/microapps/gatsby-plugin-react-i18next/blob/master/example/locales/de/index.json) | German   |\n\nYou can use different namespaces to organize your translations. Use the following file structure:\n\n```\n|-- language\n   |-- namespace.json\n```\n\nFor example:\n\n```\n|-- en\n    |-- common.json\n    |-- index.json\n```\n\nThe default namespace is `translation`. [Read more about i18next namespaces](https://www.i18next.com/principles/namespaces)\n\n### Change your components\n\nUse react i18next [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) react hook and [`Trans`](https://react.i18next.com/latest/trans-component) component to translate your pages.\n\n`gatsby-plugin-react-i18next` exposes all [`react-i18next`](https://react.i18next.com/) methods and components.\n\nReplace [Gatsby `Link`](https://www.gatsbyjs.org/docs/gatsby-link) component with the `Link` component exported from `gatsby-plugin-react-i18next`\n\n```javascript\nimport {graphql} from 'gatsby';\nimport React from 'react';\nimport {Link, Trans, useTranslation} from 'gatsby-plugin-react-i18next';\nimport Layout from '../components/layout';\nimport Image from '../components/image';\nimport SEO from '../components/seo';\n\nconst IndexPage = () =\u003e {\n  const {t} = useTranslation();\n  return (\n    \u003cLayout\u003e\n      \u003cSEO title={t('Home')} /\u003e\n      \u003ch1\u003e\n        \u003cTrans\u003eHi people\u003c/Trans\u003e\n      \u003c/h1\u003e\n      \u003cp\u003e\n        \u003cTrans\u003eWelcome to your new Gatsby site.\u003c/Trans\u003e\n      \u003c/p\u003e\n      \u003cp\u003e\n        \u003cTrans\u003eNow go build something great.\u003c/Trans\u003e\n      \u003c/p\u003e\n      \u003cdiv style={{maxWidth: `300px`, marginBottom: `1.45rem`}}\u003e\n        \u003cImage /\u003e\n      \u003c/div\u003e\n      \u003cLink to=\"/page-2/\"\u003e\n        \u003cTrans\u003eGo to page 2\u003c/Trans\u003e\n      \u003c/Link\u003e\n    \u003c/Layout\u003e\n  );\n};\n\nexport default IndexPage;\n\nexport const query = graphql`\n  query ($language: String!) {\n    locales: allLocale(filter: {language: {eq: $language}}) {\n      edges {\n        node {\n          ns\n          data\n          language\n        }\n      }\n    }\n  }\n`;\n```\n\nand in `locales/en/translations.json` you will have\n\n```json\n{\n  \"Home\": \"Home\",\n  \"Hi people\": \"Hi people\",\n  \"Welcome to your new Gatsby site.\": \"Welcome to your new Gatsby site.\",\n  \"Now go build something great.\": \"Now go build something great.\",\n  \"Go to page 2\": \"Go to page 2\"\n}\n```\n\nThis example is not using semantic keys instead the entire message will be used as a key. [Read more](https://www.i18next.com/principles/fallback#key-fallback).\n\n### Changing the language\n\n`gatsby-plugin-react-i18next` exposes `useI18next` hook\n\n```javascript\nimport {Link, useI18next} from 'gatsby-plugin-react-i18next';\nimport React from 'react';\n\nconst Header = ({siteTitle}) =\u003e {\n  const {languages, changeLanguage} = useI18next();\n  return (\n    \u003cheader className=\"main-header\"\u003e\n      \u003ch1 style={{margin: 0}}\u003e\n        \u003cLink\n          to=\"/\"\n          style={{\n            color: `white`,\n            textDecoration: `none`\n          }}\u003e\n          {siteTitle}\n        \u003c/Link\u003e\n      \u003c/h1\u003e\n      \u003cul className=\"languages\"\u003e\n        {languages.map((lng) =\u003e (\n          \u003cli key={lng}\u003e\n            \u003ca\n              href=\"#\"\n              onClick={(e) =\u003e {\n                e.preventDefault();\n                changeLanguage(lng);\n              }}\u003e\n              {lng}\n            \u003c/a\u003e\n          \u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    \u003c/header\u003e\n  );\n};\n```\n\nOr a more SEO friendly version using `Link` component\n\n```javascript\nimport {Link, useI18next} from 'gatsby-plugin-react-i18next';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nconst Header = ({siteTitle}) =\u003e {\n  const {languages, originalPath} = useI18next();\n  return (\n    \u003cheader className=\"main-header\"\u003e\n      \u003ch1 style={{margin: 0}}\u003e\n        \u003cLink\n          to=\"/\"\n          style={{\n            color: `white`,\n            textDecoration: `none`\n          }}\u003e\n          {siteTitle}\n        \u003c/Link\u003e\n      \u003c/h1\u003e\n      \u003cul className=\"languages\"\u003e\n        {languages.map((lng) =\u003e (\n          \u003cli key={lng}\u003e\n            \u003cLink to={originalPath} language={lng}\u003e\n              {lng}\n            \u003c/Link\u003e\n          \u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    \u003c/header\u003e\n  );\n};\n```\n\n## Plugin Options\n\n| Option                      | Type     | Description                                                                                                                                                                                                                                                                                  |\n| --------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| localeJsonSourceName        | string   | name of JSON translation file nodes that are loaded by `gatsby-source-filesystem` (set by `option.name`). Default is `locale`                                                                                                                                                                |\n| localeJsonNodeName          | string   | name of GraphQL node that holds locale data. Default is `locales`                                                                                                                                                                                                                            |\n| languages                   | string[] | supported language keys                                                                                                                                                                                                                                                                      |\n| defaultLanguage             | string   | default language when visiting `/page` instead of `/es/page`                                                                                                                                                                                                                                 |\n| fallbackLanguage            | string   | optionally fallback to a different language than the defaultLanguage                                                                                                                                                                                                                         |\n| generateDefaultLanguagePage | boolean  | generate dedicated page for default language. e.g) `/en/page`. It is useful when you need page urls for all languages. For example, server-side [redirect](https://www.gatsbyjs.com/docs/reference/config-files/actions/#createRedirect) using `Accept-Language` header. Default is `false`. |\n| redirect                    | boolean  | if the value is `true`, `/` or `/page-2` will be redirected to the user's preferred language router. e.g) `/es` or `/es/page-2`. Otherwise, the pages will render `defaultLangugage` language. Default is `true`                                                                             |\n| siteUrl                     | string   | public site url, is used to generate language specific meta tags                                                                                                                                                                                                                             |\n| pages                       | array    | an array of [page options](#page-options) used to modify plugin behaviour for specific pages                                                                                                                                                                                                 |\n| i18nextOptions              | object   | [i18next configuration options](https://www.i18next.com/overview/configuration-options)                                                                                                                                                                                                      |\n| verbose                     | boolean  | Verbose output. Default is true                                                                                                                                                                                                                                                              |\n\n## Page options\n\n| Option              | Type    | Description                                                                                                                                                                                      |\n| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| matchPath           | string  | a path pattern like `/:lang?/blog/:uid`, check [path-to-regexp](https://github.com/pillarjs/path-to-regexp) for more info                                                                        |\n| getLanguageFromPath | boolean | if set to `true` the language will be taken from the `:lang` param in the path instead of automatically generating a new page for each language                                                  |\n| excludeLanguages    | array   | an array of languages to exclude, if specified the plugin will not automatically generate pages for those languages, this option can be used to replace pages in some languages with custom ones |\n| languages           | array   | an array of languages, if specified the plugin will automatically generate pages only for those languages                                                                                        |\n\n## Plugin API\n\n### `Link`\n\n`Link` component is identical to [Gatsby Link component](https://www.gatsbyjs.org/docs/gatsby-link/) except that you can provide additional `language` prop to create a link to a page with different language\n\n```javascript\nimport {Link} from 'gatsby-plugin-react-i18next';\n\nconst SpanishAboutLink = () =\u003e (\n  \u003cLink to=\"/about\" language=\"es\"\u003e\n    About page in Spanish\n  \u003c/Link\u003e\n);\n```\n\n### `I18nextContext`\n\nUse this react context to access language information about the page\n\n```javascript\nconst context = React.useContext(I18nextContext);\n```\n\nContent of the context object\n\n| Attribute       | Type     | Description                                              |\n| --------------- | -------- | -------------------------------------------------------- |\n| language        | string   | current language                                         |\n| languages       | string[] | supported language keys                                  |\n| routed          | boolean  | if `false` it means that the page is in default language |\n| defaultLanguage | string   | default language provided in plugin options              |\n| originalPath    | string   | page path in default language                            |\n| path            | string   | page path                                                |\n| siteUrl         | string   | public site url provided in plugin options               |\n\nThe same context will be also available in the Gatsby `pageContext.i18n` object\n\n### `useI18next`\n\nThis react hook returns `I18nextContext`, object and additional helper functions\n\n| Function       | Description                                                                                                                                                                                                                               |\n| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| navigate       | This is a wrapper around [Gatsby navigate helper function](https://www.gatsbyjs.org/docs/gatsby-link/#how-to-use-the-navigate-helper-function) that will navigate to the page in selected language                                        |\n| changeLanguage | A helper function to change language. The first parameter is a language code. Signature: `(language: string, to?: string, options?: NavigateOptions) =\u003e Promise\u003cvoid\u003e`. You can pass additional parameters to navigate to different page. |\n\n`useI18next` also exposes the output of react i18next [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) so you can use\n\n```javascript\nconst {t} = useI18next();\n```\n\n## How to exclude pages that already have language key in path\n\nFor example if you have some other plugin or script that generates your blog posts from headless CRM like [prismic.io](https://prismic.io/) in different languages you would like to exclude those pages, to not generate duplicates for each language key. You can do that by providing `pages` option.\n\n```js\npages: [\n  {\n    matchPath: '/:lang?/blog/:uid',\n    getLanguageFromPath: true,\n    excludeLanguages: ['es']\n  }\n];\n```\n\nYou have to specify a `:lang` url param, so the plugin knows what part of the path should be treated as language key.\nIn this example the plugin will automatically generate language pages for all languages except `es`. Assuming that you have `['en', 'es', 'de']` languages the blog post with the path `/blog/hello-world` you will have the following pages generated:\n\n- `/blog/hello-world` - the English version (if you have `en` as a `defaultLanguage`)\n- `/es/blog/hello-world` - the Spanish version that should exist before you run the plugin (created manually or at build time with a plugin or api call)\n- `/de/blog/hello-world` - the German version that is generated automatically\n\nOmit `excludeLanguages` to get all the languages form the path. Make sure that you have pages for all the languages that you specify in the plugin, otherwise you might have broken links.\n\nYou may also need to add a pages config for the 404 page, if it uses the same path pattern as your excluded pages. Note that the order of these rules is important.\n\n```js\npages: [\n  {\n    matchPath: '/:lang?/404',\n    getLanguageFromPath: false\n  },\n  {\n    matchPath: '/:lang?/:uid',\n    getLanguageFromPath: true,\n    excludeLanguages: ['es']\n  }\n];\n```\n\n## How to exclude a page that should not be translated\n\nYou can limit the languages used to generate versions of a specific page, for example to limit `/preview` page to only English version:\n\n```js\npages: [\n  {\n    matchPath: '/preview',\n    languages: ['en']\n  }\n];\n```\n\n## How to fetch translations of specific namespaces only\n\nYou can use `ns` and `language` field in gatsby page queries to fetch specific namespaces that are being used in the page. This will be useful when you have several big pages with lots of translations.\n\n```javascript\nexport const query = graphql`\n  query ($language: String!) {\n    locales: allLocale(filter: {ns: {in: [\"common\", \"index\"]}, language: {eq: $language}}) {\n      edges {\n        node {\n          ns\n          data\n          language\n        }\n      }\n    }\n  }\n`;\n```\n\nNote that in this case only files `common.json` and `index.json` will be loaded.\nThis plugin will automatically add all loaded namespaces as fallback namespaces so if you don't specify a namespace in your translations they will still work.\n\n## How to fetch language specific data\n\nYou can use `language` variable in gatsby page queries to fetch additional data for each language. For example if you're using [gatsby-transformer-json](https://www.gatsbyjs.org/packages/gatsby-transformer-json/) your query might look like:\n\n```javascript\nexport const query = graphql`\n  query ($language: String!) {\n    dataJson(language: {eq: $language}) {\n      ...DataFragment\n    }\n  }\n`;\n```\n\n## How to add `sitemap.xml` for all language specific pages\n\nYou can use [gatsby-plugin-sitemap](https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/) to automatically generate a sitemap during build time. You need to customize `query` to fetch only original pages and then `serialize` data to build a sitemap. Here is an example:\n\n```javascript\n// In your gatsby-config.js\nplugins: [\n  {\n    resolve: 'gatsby-plugin-sitemap',\n    options: {\n      excludes: ['/**/404', '/**/404.html'],\n      query: `\n          {\n            site {\n              siteMetadata {\n                siteUrl\n              }\n            }\n            allSitePage(filter: {context: {i18n: {routed: {eq: false}}}}) {\n              edges {\n                node {\n                  context {\n                    i18n {\n                      defaultLanguage\n                      languages\n                      originalPath\n                    }\n                  }\n                  path\n                }\n              }\n            }\n          }\n        `,\n      serialize: ({site, allSitePage}) =\u003e {\n        return allSitePage.edges.map((edge) =\u003e {\n          const {languages, originalPath, defaultLanguage} = edge.node.context.i18n;\n          const {siteUrl} = site.siteMetadata;\n          const url = siteUrl + originalPath;\n          const links = [\n            {lang: defaultLanguage, url},\n            {lang: 'x-default', url}\n          ];\n          languages.forEach((lang) =\u003e {\n            if (lang === defaultLanguage) return;\n            links.push({lang, url: `${siteUrl}/${lang}${originalPath}`});\n          });\n          return {\n            url,\n            changefreq: 'daily',\n            priority: originalPath === '/' ? 1.0 : 0.7,\n            links\n          };\n        });\n      }\n    }\n  }\n];\n```\n\n## How to use a fallback language with semantic keys (vs. message strings)\n\nBy default this plugin is setup to fallback on the entire **message string**, that is used as language key.\n\nIn order to use **semantic keys**, so the fallback message string is the default's language value (instead of the key), it is possible to do the following;\n\nIn `/gatsby-config.js`, setup the plugin as usual, and add the key `options.i18nextOptions.fallbackLng` (i18next documentation, [configuration options](https://www.i18next.com/overview/configuration-options#languages-namespaces-resources), and [fallback options](https://www.i18next.com/principles/fallback#fallback));\n\n```\n{\n    resolve: `gatsby-plugin-react-i18next`,\n    options: {\n        localeJsonSourceName: `locale`,\n        languages: [`en`, `de`, `fr`],\n        defaultLanguage: `en`,\n        siteUrl: `https://example.com/`,\n        i18nextOptions: {\n            fallbackLng: 'en', // here we provide the fallback language to i18next\n            interpolation: {\n                escapeValue: false\n            },\n            keySeparator: false,\n            nsSeparator: false\n        }\n    }\n}\n```\n\nThen in a page query, we avoid to specify a `$language` variable used as filter, so i18next gets access to the available locales, used as fallback.\n\n```\n// /pages/index.js\nexport const query = graphql`\n  query { // no $language variable defined, no filters on allLocale\n    locales: allLocale {\n      edges {\n        node {\n          ns\n          data\n          language\n        }\n      }\n    }\n  }\n`;\n```\n\n## How to extract translations from pages\n\nYou can use [babel-plugin-i18next-extract](https://i18next-extract.netlify.app) automatically extract translations inside `t` function and `Trans` component from you pages and save them in JSON.\n\n1. Install\n\n```\nyarn add @babel/cli @babel/plugin-transform-typescript babel-plugin-i18next-extract -D\n```\n\n2. create `babel-extract.config.js` file (don't name it `babel.config.js`, or it will be used by gatsby)\n\n```javascript\nmodule.exports = {\n  presets: ['babel-preset-gatsby'],\n  plugins: [\n    [\n      'i18next-extract',\n      {\n        keySeparator: null,\n        nsSeparator: null,\n        keyAsDefaultValue: ['en'],\n        useI18nextDefaultValue: ['en'],\n        discardOldKeys: true,\n        outputPath: 'locales/{{locale}}/{{ns}}.json',\n        customTransComponents: [['gatsby-plugin-react-i18next', 'Trans']]\n      }\n    ]\n  ],\n  overrides: [\n    {\n      test: [`**/*.ts`, `**/*.tsx`],\n      plugins: [[`@babel/plugin-transform-typescript`, {isTSX: true}]]\n    }\n  ]\n};\n```\n\n3. add a script to your `package.json`\n\n```json\n{\n  \"scripts\": {\n    \"extract\": \"yarn run babel --config-file ./babel-extract.config.js -o tmp/chunk.js 'src/**/*.{js,jsx,ts,tsx}' \u0026\u0026 rm -rf tmp\"\n  }\n}\n```\n\nIf you want to extract translations per page, you can add a special comment at the beginning of the page:\n\n```\n// i18next-extract-mark-ns-start about-page\n```\n\nThis will create a file `about-page.json` with all the translations on this page.\n\nTo load this file you need to specify a namespace like this:\n\n```javascript\nexport const query = graphql`\n  query ($language: String!) {\n    locales: allLocale(\n      filter: {ns: {in: [\"translation\", \"about-page\"]}, language: {eq: $language}}\n    ) {\n      edges {\n        node {\n          ns\n          data\n          language\n        }\n      }\n    }\n  }\n`;\n```\n\n### Automatically translate to different languages\n\nAfter your messages had been extracted you can use [AWS Translate](https://aws.amazon.com/translate/) to automatically translate messages to different languages.\n\nThis functionality is out of the scope of this plugin, but you can get the idea from [this script](/example/translate.js).\n\n## How to fallback to a different language than the defaultLanguage\n\nBy default, on first load, this plugin will fallback to the defaultLanguage if the browser's detected language is not included in the array of languages.\n\nIf you want to fallback to a different language in the languages array, you can set the `fallbackLanguage` option.\n\nFor example, if the default language of your site is Japanese, you only have English as another language, and you want all other browser-detected languages to fallback to English, not Japanese.\n\n```javascript\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-plugin-react-i18next',\n      options: {\n        defaultLanguage: 'ja',\n        fallbackLanguage: 'en'\n      }\n    }\n  ]\n};\n```\n\n## Mentions\n\n- [Best internationalization for Gatsby](https://dev.to/adrai/best-internationalization-for-gatsby-mkf) by\n  Adriano Raiano\n\n## Credits\n\nThis package is based on:\n\n- [gatsby-plugin-intl](https://github.com/wiziple/gatsby-plugin-intl) by Daewoong Moon\n- [gatsby-i18n-plugin](https://github.com/ikhudo/gatsby-i18n-plugin) by ikhudo\n\n## License\n\nMIT \u0026copy; [microapps](https://github.com/microapps)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicroapps%2Fgatsby-plugin-react-i18next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicroapps%2Fgatsby-plugin-react-i18next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicroapps%2Fgatsby-plugin-react-i18next/lists"}