Namespaces

By default VitNode provide a way to get access to the translation strings only for core.global namespace. But sometimes you need to get access to the translation strings in other namespaces.

For example, you have a component that needs to get access to the translation strings in the core.global and welcome.home namespaces.

Client Component Only

Provide namespaces into components is only for client components. If you want to use translation strings in server components you can avoid this guide.

Structuring

To translate your content, select the plugin in frontend folder, go to langs folder and pick the language you want to translate.

apps/frontend/src/plugins/{your_plugin}/langs/en.json

{
  "{your_plugin}": {
    "home": {
      "hello": "Hello World",
      "world": "World"
    }
  }
}

Primary key

Name your plugin should be a primary key in the JSON file or with the prefix admin_ for admin plugins.

apps/frontend/src/plugins/{your_plugin}/langs/en.json

{
  "{your_plugin}": {
    "hello": "Hello World" // ✅ This will work
  },
  "admin_{your_plugin}" {
    "world": "World" // ✅ This will work
  },
  "world": "World" // ❌ This will not work
}

Usage

To get access to the translation strings in other namespaces you need to use the TranslationsProvider component.

apps/frontend/src/app/[locale]/(main)/{your_plugin}/layout.tsx

import { TranslationsProvider } from 'vitnode-frontend/components/translations-provider';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <TranslationsProvider namespaces={['welcome.home']}>
      {children}
    </TranslationsProvider>
  );
}

Provide the list of namespaces that you want to get access to the translation strings in the namespaces prop.

Global namespace

You don't need to include the core.global namespace in the namespaces prop. It's already included by default.

Structuring

Usage

On this page