{"componentChunkName":"component---src-templates-post-js","path":"/blog/2020/09/09/namespace-separator-syntax-using-gatsby-plugin-react-i18next/","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://sung.codes"}},"mdx":{"id":"69f48e19-dc7e-59b5-84b9-6b79e4ba4e6e","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Namespace separator syntax using gatsby-plugin-react-i18next\",\n  \"date\": \"2020-09-09\",\n  \"published\": true,\n  \"tags\": \"svelte, javascript, selfnote\",\n  \"author\": \"Sung M. Kim\",\n  \"banner\": \"./images/featured-image.jpg\",\n  \"bannerCredit\": \"Image by [William Krause](https://unsplash.com/@williamk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) from [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Introduction\"), mdx(\"p\", null, \"First time learning i18n (internationalization) using \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/plugins/gatsby-plugin-react-i18next/\"\n  }), \"gatsby-plugin-react-i18next\"), \" \"), mdx(\"p\", null, \"I chose this specific Gatsby plugin as it wraps around \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://react.i18next.com/\"\n  }), \"react-i18next\")), mdx(\"p\", null, \"The reason is similar to Robin Wieruch's description in his blog, \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.robinwieruch.de/react-internationalization#react-internationalization-which-library-should-i-use\"\n  }), \"React Internationalization with i18n > REACT INTERNATIONALIZATION: WHICH LIBRARY SHOULD I USE?\"), \".\"), mdx(\"h2\", null, \"Problem\"), mdx(\"p\", null, \"But I had trouble accessing keys by namespace using \\\":\\\" syntax.\"), mdx(\"p\", null, \"e.g.) Accessing \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"text\"), \" under \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"header\"), \" namespace\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"i18next\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"t\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'header:text'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\")))), mdx(\"p\", null, \"declared as following file, \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"<project root>/locales/<language>/header.json\"), \".\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"json\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-json\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    text\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"Greetings\\\"\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"p\", null, \"The React page was displaying \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"header:text\"), \" instead of \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"Greetings\"), \".\"), mdx(\"h2\", null, \"Issue\"), mdx(\"p\", null, \"The issue was to blindly copy the example configuration in the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/plugins/gatsby-plugin-react-i18next/\"\n  }), \"gatsby-plugin-react-i18net > Configure the plugin\"), \" documentation.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// In your gatsby-config.js\"), \"\\nplugins\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    resolve\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"gatsby-plugin-react-i18next\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n    options\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n      path\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token interpolation\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }), \"${\"), \"__dirname\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }), \"}\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"/locales\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n      languages\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"en\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"es\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"de\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n      defaultLanguage\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token template-string\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token string\"\n  }), \"en\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token template-punctuation string\"\n  }), \"`\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// you can pass any i18next options\"), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// pass following options to allow message content as a key\"), \"\\n      i18nextOptions\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n        interpolation\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n          escapeValue\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token boolean\"\n  }), \"false\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// not needed for react as it escapes by default\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        keySeparator\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token boolean\"\n  }), \"false\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// \\uD83D\\uDC47 issue here\"), \"\\n        nsSeparator\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token boolean\"\n  }), \"false\"), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n      pages\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n          matchPath\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'/:lang?/blog/:uid'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n          getLanguageFromPath\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token boolean\"\n  }), \"true\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n          excludeLanguages\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'es'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n          matchPath\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'/preview'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n          languages\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"'en'\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"), \"\\n\"))), mdx(\"p\", null, \"I didn't know each of those options without understanding each option.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"After few hours of digging around, the culprit turned out to be \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.i18next.com/overview/configuration-options#misc\"\n  }), \"nsSeparator\"), \".\"), mdx(\"h2\", null, \"Solution\"), mdx(\"p\", null, \"Either leave the \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"nsSeparator\"), \" option out for a default \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \":\"), \" separator or pass a string to it to use the namespace syntax.\"), mdx(\"p\", null, \"e.g.)\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"nsSeparator\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\":\\\"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Namespace separator syntax using gatsby-plugin-react-i18next","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='288'%20viewBox='0%200%20400%20288'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20104v103h5a2549%202549%200%2001135-10l6-3c-1-1-1-1%201-1l4-2c1-3%207-5%208-4l1-1v-4c0-2%201-2%204-2s4-1%204-2l-2-1c-2%200-2%200-1-1s0-1-2-2h-8c0%202-2%202-6%202h-5l2%201c3%200%205%201%203%202h-3c-3-1-3%200-3%204l-1%201v8c-2%201-11-1-11-4%200-2%200-3%202-2%202%200%202-1%202-3s-2-3-3%200c-1%202-3%200-3-2s0-2-1-1l-10%201c-9%201-13%202-11%206l-2%201-2%201-2%202-2%202-1%201-1%202-1%201-1-2h-2l-10%202%201-2c1-3-1-6-3-5-1%201-2-2-1-4%201-1%201-1%202%201l2%202v-2c1-3%200-3-1-2l-2-1c1-1%204-1%206%201%202%201%205%200%206-2s0-2-2-1c-3%200-3-1%201-4l2-4%208-2h3c-1-2%201-5%204-5%202%200%202%200%201-1-1-2-1-2%201-2l-1-1c-1-2-1-2%205-2l6-1v-1c2%200%206-5%205-6v-1c1-1%202-2%202-5s0-3%202-3l3-1%203-2c2%200%202%200%201-1-1-2-1-3%201-3v-1c-1-2-1-2%201-3v-4c1-1%200-6-2-6l-1-1%201-1c1%201%204%200%204-2l-1-1-1-2%202-1c2%201%202%200%201-2l1-2%201-1-2-1c-2%200-2%200%200-4l4-5c1-2%202-3%201-4l2-3c1-1%201-1-1-2-3%200-4-1-1-3%202-2%201-3-1-2l-2-1%201-1%204-1h2l1-1-2-1h-2l2-1%202-2h1l2-1h11c1%201%204-1%204-4l5-5c4-3%206-5%205-6l2-1h10c0-2%203-3%204-1v5l1%202%202-2v-3c-2-1%200-2%202-3%203%200%206-1%206-3s6-5%208-5h3c2%202%204%203%204%201s14-3%2016-1l6%201%202%202%202-1c2-2%202-2%201-3s-1-1%201-1l3%201c0%201%206%203%2011%203l5%202c1%202%204%202%206%200h3c1%201%202%201%203-1%202-1%202-1%205%201l3%202%204%203%204%202c1%200%203%201%203%203l3%204v4l2-1v-1l2%202%202%201%201-1c-1-2%200-1%203%201s4%203%203%204c0%203%204%207%206%206v-1l-5-5%202%201h1c0-2%203-1%206%201%202%202%202%202%204%200%202-3%203-3%203%200-1%201%200%202%201%202%203%201%204%203%201%204l-1%203c1%201%200%201-2%201-1%200-2%200-1%201l3%201c1-1%202%200%202%201%201%202%200%202-2%202l-3-1-1-1-5-4%202-1c2%200%203%200%202-1%200-2-4-1-5%201%200%202-4%203-5%201l-4-2c-3-1-3-1-1-2%203-1%201-3-2-3-3%201-7-1-5-2h-1c-1%200-2%200-1-1%201%200%201-1-1-2l-1-1v-2l-3-3c-1-3-2-4-4-2l-3%201c-2%200-3%202-1%202%201%201%200%201-1%201-2%200-3-1-3-2h-2c-2%202-3%201-3-1%201-1%200-2-1-2l-1-1c0-2-4-2-6%200l-5%201c-4%200-5%201-4%202l3%201c4%200%207%205%204%207l-1%205c0%205%200%206%202%205%202%200%202%200%201%201l1%202%202%202-2%201v1c1%201%201%201-1%201h-3l2%201%202%201-2%202c-3%202-3%204%200%204%202%200%202%200%200%205l-3%204c-1-1-1-1-3%201l-2%203v-3c0-3-1-3-4%200-3%202-1%204%202%203%202%200%204%206%202%2010-1%203%202%205%206%204%202%200%203%200%203%203%201%202%200%203-1%203-1%201%200%201%201%201%204%200%209%205%206%205-1%200-3%202-4%205l-4%204h-1l1%201v3l3%203%205%202%202%201-4%201-2%201h-10c-1-2%200-4%202-4h1c0-2-6-4-8-4l-1-1%201-2c3%200%203-2%200-2h-3c1%204%200%207-1%206l-1-2c2-3-4-4-15-3-2%200-3%200-3-3-2-4-4-6-5-4h-6l-3-1-4-1c-2-1-2-1-6%203s-5%205-9%206l-5%201h-1c-1-1-4%203-4%205%200%201-1%202-3%202-4%201-7%203-5%205l-2%202-1%201-1%203-2%203-1%201-3%202-2%202h2c3%200%207-3%205-3h1l5-4c2-4%203-4%203-2l-2%204c-2%202%201%204%206%204%203%200%204%200%204%202h1c2-2%203-1%202%202%200%204%201%205%205%206l5%203c2%203%2010%206%2017%207a589%20589%200%200145%205%201454%201454%200%2001125%2011l1-107V0H0v104m159%2051c0%203-8%204-13%202-2-2-3-2-6%201l-2%204-3%202h1a189%20189%200%20018-1l2-1c2-1%203%201%201%201v1c4%200%2013-5%2013-8v-2l-1%201m-36%2064c3%202%201%203-5%204l-8%201c-1%201-4%202-6%201l-4%201-4%201c-3%200-3%200-1%201l4%201c2-1%208%200%208%201s-1%202-3%202l-3%202%203%202%204%203v2l-1%201-2-2c0-2%200-2-2-3l-3%201%203%201-1%202h-4c-1-2-2-2-3%200h-7l-1-1h-3l-2-1c0-1-1-2-6-2-8%200-8%200%201%203%202%200%201%202-2%202s-9-2-10-5c-2-2-3-2-12-2-6%200-9%200-8-1l14-1%2013-1-7-2-8-3c-1-2-14-3-18-2a156%20156%200%2001-34-2H0v65h401v-33l-1-29c0%205%200%205-3%205l-3%201h3c3%200%203%200%203%203v2h-15c-17%200-28-1-28-2l3-1-7-1-13-1c-2%200-2%200-1%202%200%201-1%201-7-1l-2%201-2%201c-6%200%207%203%2017%203%2014%201%2031%204%2033%206h-32l4%201%2014%201c5%201%2010%202%2011%201l2%201c-1%201%200%201%205%201h7l4%201a233%20233%200%2001-36-1h-12c-10%201-13%200-8-2%202-1%202-1%201-3l-7-1h-5l4%201c5%201%206%203%202%203l-2%201h-2l-5-1h-3l3%201%203%201h-3l-3%201-2%201c-3%200-3-2%200-2%201-1-3-1-10-1l-12%201h-6l-7-1-6-1%208-1h9l3-1h-14a175%20175%200%2001-27-1h-2l-3-1c-2%200-2%200-1%201%204%202-3%203-7%201h-3c0%202-3%201-4-2%200-4-2-4-2%200l-1%203c-1-1-1%200-2%201%200%203-1%204-3%201-2-2-9-2-10%200-1%201-7-1-6-2l-1-1c-1%200-2%200-1%201l-1%201-1-2h-1l-1%202-1%201c1%202-5%202-7%201l-5-1h-3l3-2h6c1%202%202%202%203%200v-1l-2-1-5-1-6%201c0%202-6%202-7-1-2-1-3-2-6-1l-5-1a1062%201062%200%2001-30-8c-10%200-11-3-1-3%205%200%205%200%203-1l-6-1c-4%200-4-1-3-3v-2c-2%200-5%202-4%203l-2%201c-2%200-2-1%200-3v-4l-2-1-2-1c-2%200-2%200-1%201'%20fill='%23FFC600'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.391304347826087,"src":"/static/b6ad7d16379f8f3d75cf61d251ee4863/f422e/featured-image.jpg","srcSet":"/static/b6ad7d16379f8f3d75cf61d251ee4863/e75b5/featured-image.jpg 160w,\n/static/b6ad7d16379f8f3d75cf61d251ee4863/c01e2/featured-image.jpg 320w,\n/static/b6ad7d16379f8f3d75cf61d251ee4863/f422e/featured-image.jpg 640w,\n/static/b6ad7d16379f8f3d75cf61d251ee4863/a6352/featured-image.jpg 960w,\n/static/b6ad7d16379f8f3d75cf61d251ee4863/ec6c5/featured-image.jpg 1280w","srcWebp":"/static/b6ad7d16379f8f3d75cf61d251ee4863/991d2/featured-image.webp","srcSetWebp":"/static/b6ad7d16379f8f3d75cf61d251ee4863/578e8/featured-image.webp 160w,\n/static/b6ad7d16379f8f3d75cf61d251ee4863/8dbf3/featured-image.webp 320w,\n/static/b6ad7d16379f8f3d75cf61d251ee4863/991d2/featured-image.webp 640w,\n/static/b6ad7d16379f8f3d75cf61d251ee4863/1fb14/featured-image.webp 960w,\n/static/b6ad7d16379f8f3d75cf61d251ee4863/135cd/featured-image.webp 1280w","sizes":"(max-width: 640px) 100vw, 640px"}}}},"excerpt":"Introduction First time learning i18n (internationalization) using  gatsby-plugin-react-i18next   I chose this specific Gatsby plugin as it…","fields":{"year":"2020","slug":"/blog/2020/09/09/namespace-separator-syntax-using-gatsby-plugin-react-i18next/"}}},"pageContext":{"id":"69f48e19-dc7e-59b5-84b9-6b79e4ba4e6e"}},"staticQueryHashes":["398935099"]}