Translations (i18n)
Default namespace is called
common and contains translations used on all pages (Layout, Nav, etc) and is stored at frontend/public/locales/{locale}/common.jsonNamespaces (scopes, domains) are stored in separate json files at
frontend/public/locales/{locale}/{namespace}.json One namespace can combine the translations keys from several pages with common reusable strings ex. auth scope collects keys for login and register pages.It is preferred to use kebab-case for translation keys and extract another level of nesting when the common prefix of the keys is above 3 or makes sense to be separated as new keys might be added in the future.
- Namespace is separated with
: - Translation nesting levels are separated with
. - Words in a translation key are separated with
-
domain:pages.nested-level.another-nested-level.translation-key{
"cta": {
"login": "Log In",
"register": "Register",
"send": "Send",
"reset": "Reset"
},
"fields": {
"email": "Email",
"password": "Password",
"confirm-password": "Confirm Password",
"first-name": "First name",
"last-name": "Last name"
},
"pages": {
"forgotten-password": {
"instructions": "To reset your password, please type your email address below.",
"greeting": "Hello {{name}}!"
}
}
}
Usage of translation hook
useTranslation is preferred over usage of <Trans /> component, whenever possible.import { useTranslation } from 'next-i18next'
export default function CustomComponent() {
const { t } = uxseTranslation()
return (
<div>
<h1>{t('nav.custom-page')}</h1>
<h2>{t('auth:pages.forgotten-password.greeting', { name: 'Interpolation' })}</h2>
<p>{t('auth:pages.forgotten-password.instructions')}</p>
</div>
)
}
import { GetStaticProps } from 'next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import Page from 'components/forgottenPassword/ForgottenPasswordPage'
export const getStaticProps: GetStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale ?? 'bg', ['common', 'auth'])), // List used namespaces
},
})
export default Page
Last modified 2yr ago