-
Create a localization file, ie: /src/locales/sv/common.[json|js|ts]
-
Create /src/locales/translations.ts
import { initServerTranslations } from '@bricco/localization';
import { Common as CommonSV } from '@/locales/sv/common';
const dictionaries = {
en: {},
sv: CommonSV,
};
const { t, getLang } = initServerTranslations(dictionaries);
export { dictionaries, getLang, t };
- Add a /localization.d.ts with this code:
import '@bricco/localization';
import { Common as CommonSV } from '@/locales/sv/common';
declare module '@bricco/localization' {
interface CustomOptions {
dictionary: typeof CommonSV;
}
}
- Edit your main layout.tsx, ie: /src/app/layout.tsx
import { Localization } from '@bricco/localization';
import { dictionaries } from '@/locales/translations';
...
export default async function RootLayout({ children }: { children: React.ReactNode }): Promise<JSX.Element> {
...
<body ...>
<Localization dictionaries={dictionaries}>
{children}
</Localization>
</body>
...
}
- Optional: Add the language switcher to the Admin menu
<AdminLayout
menu={menu}
languages={[
{ id: 'en', label: 'English' },
{ id: 'sv', label: 'Svenska' },
]}
title={'Example'}
subTitle="@bricco/next-utils"
>
{children}
</AdminLayout>
import { t } from '@/locales/translations';
import { useTranslation } from '@bricco/localization';
const { t } = useTranslation();
// Will fail to compile TS if "String in english" is missing from @/locales/sv/common.
console.log(t('String in english'))