Namespaces
Provide a way to get access to the translation strings in client components on frontend.
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.
{
"{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.
{
"{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.
import { I18nProvider } from '@vitnode/core/components/i18n-provider';
export default function Layout({ children }: { children: React.ReactNode }) {
return <I18nProvider namespaces={['welcome.home']}>{children}</I18nProvider>;
}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.