Next-i18next: Dev-mode: reload resources on page reload

[felixmosh]

Is your feature request related to a problem? Please describe.

When you develop the app u are usually adding / changing keys in the translation jsons, because of the fact that i18n runs once (at server startup) the change is not reflected in the browser, you need to restart the server for the changes to affect.

Describe the solution you'd like

We can add in the next-i18next middleware a check for NODE_ENV=development and if so, attach additional middleware that will invoke i18n.reloadResources.

[isaachinman]

This has been requested in the past (eg #108). Any solution here is going to be inherently flakey in my opinion. I'm open to any reasonable PR but won't be working on this personally.

[felixmosh]

Cool, will prepare one 👍

[isaachinman]

I would suggest you restart the entire server process as opposed to trying to use i18n.reloadResources. Either way, you will need to watch config.localePath, which will not be straightforward as this is defined at runtime.

[felixmosh]

server.use(async (req, _res, next) => {
   if (process.env.NODE_ENV==='development' && req.i18n) {
     await req.i18n.reloadResources();
   }
   next();
});

currently works for me in my local change.

U don't think that it should be part of this lib?

[isaachinman]

Sorry, do you mean to reload resources for every single request? No, I don't think that's a good idea.

[isaachinman]

The appropriate solution would be to watch config.localePath for changes and perform the reload work (either the entire Node process or the i18n resources) on demand.

[felixmosh]

Ok, let me thing on a better solution.

[felixmosh]

So, I agree with u that it should not be part of this lib.

If anyone interested with my final solution:

const chokidar = require('chokidar');
const path = require('path');
chokidar.watch('static/locales/**/*.json', { ignoreInitial: true }).on('all', (_event, filePath) => {
    const parsedPath = path.parse(filePath);
    const ns = parsedPath.name;
    const lng = path.basename(parsedPath.dir);
    nextI18next.i18n.reloadResources([lng], [ns]);
    console.log(chalk.magenta(`\nReloaded successfully ${filePath}`));
});

[Fonger]

@felixmosh Thanks for your solution! Finally I don't need to restart my dev server every time.

However I still need to reload browser manually.
Did you figure out how to make hot reload work?

[felixmosh]

@Fonger , I didn't tried to enable hot reload for it.

[felixmosh]

I've developed i18next-hmr in-order to hot reload client & server when translations are changes... check it out :]

[qlereboursBS]

@felixmosh could you clarify the steps to setup i18next-hmr for nextjs please?

I encountered troubles with this answer too, so I'll sum up what needs to be done:

In my next-i18next config file i18n.js, I added this piece of code:

// standard configuration you should already have
const i18Next = new NextI18Next({
  ...your options
});

module.exports = i18Next;

if (process.env.NODE_ENV !== "production" && !process.browser) { // because you can't load chokidar in a browser and it leads to errors
  const chokidar = require('chokidar');
  chokidar.watch('static/locales/**/*.json', { ignoreInitial: true }).on('all', (_event, filePath) => {
    const parsedPath = path.parse(filePath);
    const ns = parsedPath.name;
    const lng = path.basename(parsedPath.dir);
    i18Next.i18n.reloadResources([lng], [ns]);
    console.info(`\nReloaded successfully ${filePath}`);
  });
}

[felixmosh]

@qlereboursBS this code is not relevant to i18next-hmr, check out the examples folder it has 2 nextjs setups

[qlereboursBS]

Yes @felixmosh I understood but as I didn't see the example folder and I had problems setting up i18next-hmr, I tried to use the backup solution. I had problems too, so I wanted to clear things up for anyone coming here.
I checked the example folder, it helped me a lot, it's working perfectly now, thank you very much for this!