getTranslation

Server getter for adding translations to React Server Components and outside React DOM.

import getTranslation from '@nimpl/i18n/getTranslation';
 
const ServerComponent: React.FC = () => {
    const { t } = getTranslation();
 
    return (
        <div>
            {/* Welcome to Next Translation */}
            {t('header.nav.home')}
        </div>
    )
}

You can also specify the desired language and translations will be added specifically for it:

const { t } = getTranslation({ language: 'fr' });

To add translations outside the React DOM, you can also use getTranslation, but always passing the desired language.

import createTranslation from '@nimpl/i18n/createTranslation'
// ...
export async function generateMetadata({ params }: { params: { lang: string } }) {
    const { t } = await getTranslation({ language: params.lang });
    return {
        title: t('homePage.meta.title'),
    }
}

Options

You can pass opts as the second argument of t.

Now you can pass a query there to inject variable strings inside translations. In the translation, the variable should be isolated by two curly braces ({{example}} page title)

const Component: React.FC = () => {
    return (
        <div>
            {/* Price starts from {{price}} */}
            {t('pricing.tariffs.solo', { query: { price: '16.90' } })}
        </div>
    )
}

App Organization useTranslation