next-translate issue

Unanswered

Zone-tailed Hawk posted this in #help-forum

Zone-tailed HawkOP

2024-11-27T13:04:12.564Z

My next translate is correctly setup, I have locales dir in root, in locales en and ar dir, each of them have a common.json containing their respective languages.
When I use t() on something like {t('navbar.nav_links.home')}, it gives:
[next-translate] "common:navbar.nav_links.home" is missing in current namespace configuration. Try adding "navbar.nav_links.home" to the namespace "common".
However I have it there, if I manually import en and do en.navbar.nav_links.home, it works.

Structure of en common json for example:

{
  "navbar": {
    "logo_alt": "Logo",
    "nav_links": {
      "about_us": "About Us",
      "services": "Services",
      "gallery": "Gallery",
      "faq": "FAQ",
      "jobs": "Jobs",
      "home": "Home",
      "contact_us": "Contact Us"
    },
    "language_flags": {
      "english": "English",
      "arabic": "Arabic"
    }
  }
}

in the navbar:

import { useRouter } from 'next/router';
import useTranslation from 'next-translate/useTranslation';
export default memo(function Navbar() {
  const router = useRouter();
  const { t, lang } = useTranslation('common');  
   [....rest of code....]

<ScrollLink smooth={true} duration={500} to="aboutUs">
            {t('navbar.nav_links.about_us')}  
</ScrollLink>

example usage

7 Replies

Zone-tailed HawkOP

2024-11-27T13:05:24.847Z

next.config.mjs:

import nextTranslate from 'next-translate-plugin';

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'ar'],
    defaultLocale: 'en',
  },
};

export default nextTranslate(nextConfig);

next-translate.config.js:

module.exports = {
    locales: ['en', 'ar'],
    defaultLocale: 'en',
    pages: {
      '*': ['common']
    }
  }

i18n.js:

module.exports = {
    i18n: {
      locales: ['en', 'ar'], 
      defaultLocale: 'en',    
      localeDetection: true,  
    },
  };

Zone-tailed HawkOP

2024-11-27T13:29:50.863Z

next-translate - compiled page: / - locale: en - namespaces:  - used loader: getStaticProps
Language in useTranslation hook: en
 GET / 200 in 49ms
next-translate - compiled page: / - locale: en - namespaces:  - used loader: getStaticProps

the namespace isnt loading correctly

module.exports = {
    locales: ['en', 'ar'],
    defaultLocale: 'en',
    pages: {
      '*': ['common']
    },
    loadLocaleFrom: (lang, ns) => 
      import(

./locales/${lang}/${ns}.json

).then((m) => m.default)
  };

However I specified it in the next-translate.config.js