Back to Blog

Auto reload locales in Nextjs without restarting the server

Blog post illustration

Constantly restarting to see the changes you've made to your json files can get tiresome really fast - fortunately theres a neat trick available with next-i18next to avoid that.

If you just want to see the code, here is what we use:

import nextI18nextConfig from '@/../next-i18next.config';
import { MyResources } from '@/types/next-i18next';
import { i18n } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

interface ContextModel {
    params: { locale: string };
}

const getI18nPaths = () =>
    nextI18nextConfig.i18n.locales.map((lng) => ({
        params: {
            locale: lng,
        },
    }));

export const getStaticPaths = () => ({
    fallback: false,
    paths: getI18nPaths(),
});

async function getI18nProps(ctx: ContextModel, ns: Array<keyof MyResources> = ['common']) {
    const locale = ctx?.params?.locale || 'en';
    if (process.env.NODE_ENV === 'development') {
        await i18n?.reloadResources();
    }
    const props = {
        ...(await serverSideTranslations(locale, ns)),
    };

    return props;
}

export function makeStaticProps(ns: Array<keyof MyResources>) {
    return async function getStaticProps(ctx: ContextModel) {
        return {
            props: await getI18nProps(ctx, ns),
        };
    };
}

The gist of it is the part with reloadResources here:

async function getI18nProps(ctx: ContextModel, ns: Array<keyof MyResources> = ['common']) {
    const locale = ctx?.params?.locale || 'en';
    if (process.env.NODE_ENV === 'development') {
        await i18n?.reloadResources();
    }
    const props = {
        ...(await serverSideTranslations(locale, ns)),
    };

Simple as that, with this little addition we can say goodbye to restarting the server every time to see the translations (which gets tiresome really fast)

Additionally if you want to you can also pass an array of languages or namespaces into the brackets after reloadResources if you only want to reload content in some particular language or some specific space instead of reloading everything. If you ever had to restart the server multiple times to see the translations I bet I don't have to sell you on this.

postsRecommendation
What are the differences between translation and localization?

While both terms are similar, localization goes beyond just translating and ensures your product feels local and caters to the users in a particular region.

Author image
DevTranslate team
9/16/2022
A Quick Guide to App Localization - DevTranslate

Application localization is the process of adapting your application to the culture & language of each target market in which you would like to succeed.

Author image
DevTranslate team
9/18/2022
Reaching a global audience through localization

How to gain users by localizing your app and who or what to rely on for translation. Gain access to a global audience for your app by using the right tool.

Author image
DevTranslate team
10/4/2022

cta.translate

cta.description
cta.button