i18n

These are a set of utilities to help you manage internationalization in your app and, in particular, to help you translating the routes of your app. Assuming that your app's default language is English, these utils will allow you to translate /login to /es/iniciar-sesion (instead of /es/login), for example. In order for these to work properly, you'd have to be using the next-i18next library, which is a wrapper around i18next, for internationalization in your app.

createNextI18NextConfig

Creates a next-i18next configuration object.

In your next-i18next.config.js file, you can use this function to create the configuration object:

import { createNextI18NextConfig } from '@krakentech/blueprint-utils/i18n';

module.exports = createNextI18NextConfig({
    defaultLocale: 'en',
    locales: {
        en: 'English',
        de: 'Deutsch',
        fr: 'Français',
    },
    pathToCustomTranslationsFolder: `./src/locales`,
});

createNextSitemapConfig

Creates a next-sitemap configuration object that takes into account the translations of the routes.

Only relevant if you are using the next-sitemap package.

In your next-sitemap.config.js file:

const { createNextSitemapConfig } = require('@krakentech/blueprint-utils/i18n');
const { i18n } = require('./next-i18next.config');

module.exports = createNextSitemapConfig({
    siteUrl: process.env.NEXT_PUBLIC_URL,
    i18n,
    routeTranslations: {
        accounts: {
            de: 'konten',
            en: 'accounts',
            fr: 'comptes',
        },
        'comms-preferences': {
            de: 'kommunikationseinstellungen',
            en: 'comms-preferences',
            fr: 'preferences-de-communication',
        },
        dashboard: {
            de: 'armaturenbrett',
            en: 'dashboard',
            fr: 'espace-client',
        },
        login: {
            de: 'anmelden',
            en: 'login',
            fr: 'connexion',
        },
        masquerade: {
            de: 'maskerade',
            en: 'masquerade',
            fr: 'masquerade',
        },
        portfolios: {
            de: 'portfolios',
            en: 'portfolios',
            fr: 'portefeuilles',
        },
        settings: {
            de: 'einstellungen',
            en: 'settings',
            fr: 'parametres',
        },
    },
    pathToAppRoot: './',
    configOverrides: {},
});

createRewritesAndRedirects

Creates the rewrites and redirects arrays for the Next.js' next.config file that takes into account the translations of the routes.

In your next.config.js file:

const {
    createRewritesAndRedirects,
} = require('@krakentech/blueprint-utils/i18n');
const { i18n } = require('./next-i18next.config');

const { redirects, rewrites } = createRewritesAndRedirects({
    i18n,
    pathToAppRoot: './',
    routeTranslations: {
        accounts: {
            de: 'konten',
            en: 'accounts',
            fr: 'comptes',
        },
        'comms-preferences': {
            de: 'kommunikationseinstellungen',
            en: 'comms-preferences',
            fr: 'preferences-de-communication',
        },
        dashboard: {
            de: 'armaturenbrett',
            en: 'dashboard',
            fr: 'espace-client',
        },
        login: {
            de: 'anmelden',
            en: 'login',
            fr: 'connexion',
        },
        masquerade: {
            de: 'maskerade',
            en: 'masquerade',
            fr: 'masquerade',
        },
        portfolios: {
            de: 'portfolios',
            en: 'portfolios',
            fr: 'portefeuilles',
        },
        settings: {
            de: 'einstellungen',
            en: 'settings',
            fr: 'parametres',
        },
    },
});

module.exports = {
    async redirects() {
        return redirects;
    },
    async rewrites() {
        return rewrites;
    },
    ...
};

---

The following functions work even if you are not using the previously mentioned setup. They are more general purpose.

useI18nUtils

A hook that provides a set of utilities to help you format things like dates and currencies based on the currently selected locale.

import { useI18nUtils } from '@krakentech/blueprint-utils';
import { useRouter } from 'next/router';
import { en, de, fr } from 'date-fns/locale';

// This is an example of the i18n object that you can pass to the hook
const i18n = {
    locales: {
        en: 'English',
        de: 'Deutsch',
        fr: 'Français',
    },
    defaultLocale: 'en',
    dateLocales: { en, de, fr },
    currency: 'GBP',
    currencyReturnedInMinorUnit: true,
};

const Component = () => {
    const { locale, defaultLocale } = useRouter();
    const {
        convertMajorToMinorUnit,
        convertMinorToMajorUnit,
        formatCurrency,
        formatCurrencyFromAPI,
        formatCurrencyFromMinorUnit,
        formatDateForDisplay,
        formatDayOfMonth,
        getCurrencySymbol,
        localiseStoryblokName,
        localiseStoryblokSlug,
    } = useI18nUtils({
        i18n,
        locale,
        defaultLocale,
    });

    return <></>;
};