< Back to posts
AuthorDevTranslate,10.03.2023

Auto reload locales in Nextjs without restarting the server

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.

You may also like

Quick guide to Next.js i18n
Author image

DevTranslate

Quick guide to Next.js i18n

Nextjs i18 requires just a few simple steps and combining the power of next-i18next with DevTranslate makes translating your app simple and easy.
7 months ago|4 minutes
Translation and JSON files
Author image

DevTranslate

Translation and JSON files

A quick guide to why the JSON format is key for localization and how using an online json and xml translator can help you automate that process.
a year ago|3 minutes
Reaching a global audience through localization
Author image

DevTranslate

Reaching a global audience through localization

How to gain users by localizing your app and who/what to rely on for translation.
a year ago|4 minutes

Continue browsing

See all features

Translate your app

See pricing

Read latest news

Visit blog