@bricco/localization NPM

Initialization

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>

Usage

Server components

  import { t } from '@/locales/translations';

Client componets

  import { useTranslation } from '@bricco/localization';

  const { t } = useTranslation();

To translate

  // Will fail to compile TS if "String in english" is missing from @/locales/sv/common.
  console.log(t('String in english'))

9 months ago

9 months ago

9 months ago

11 months ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago