Skip to content
I18Next HMR 🔥webpack plugin that allows to reload translation resources on client & server
Branch: master
Clone or download
Latest commit 665613a Dec 19, 2019


npm CircleCI

I18Next HMR 🔥webpack plugin that allows to reload translation resources on client & server


  • Node.js v8 or above
  • Webpack 4.x


$ npm install --save-dev i18next-hmr 


Add the plugin to your webpack config (or nextjs).

// webpack.config.js 
const { I18NextHMRPlugin } = require('i18next-hmr/plugin');    

module.exports = {  
  plugins: [    
    new I18NextHMRPlugin({  
      localesDir: path.resolve(__dirname, 'static/locales'),    
// i18next.config.js 
const i18next = require('i18next'); 
i18next.init(options, callback);    
if (process.env.NODE_ENV === 'development') {    
  const { applyClientHMR } = require('i18next-hmr/client');    
// server.js 
const express = require('express');

const i18n = require('./i18n');

if (process.env.NODE_ENV === 'development') {
  const { applyServerHMR } = require('i18next-hmr/server');

const port = process.env.PORT || 3000;

(async () => {
  const server = express();
  server.get('*', (req, res) => handle(req, res));

  await server.listen(port);
  console.log(`> Ready on http://localhost:${port}`);

Start the app with NODE_ENV=development

Server side

The lib will trigger i18n.reloadResources([lang], [ns]) on the server side with lang & namespace extracted from the translation filename that was changed.

Client side

The lib will invoke webpacks hmr to update client side, that will re-fetch (with cache killer) the updated translation json, and trigger i18n.changelanguage(lang) to trigger listeners (in React app it will update the UI).


A working examples can be found in the examples folder.

nextjs with next-i18next


You can’t perform that action at this time.