2

My client-side analytics solution requires me to run some code after all of the translations have been loaded by next-i18next, but I can't figure out how to do this.

Specifically, I need to run the code after my document.title has been updated with the new translated string.

I've tried adding event handlers, but it doesn't work.

import { i18n } from 'next-i18next'

// these never fire
i18n?.on("initialized", () => console.log("initialized"))
i18n?.on("loaded", () => console.log("loaded"))


// this doesn't work either
const { i18n } = useTranslation()
i18n?.on("initialized", () => console.log("initialized"))
i18n?.on("loaded", () => console.log("loaded"))
Greg Baker
  • 21
  • 2
  • Here's a simple reproducible example. https://github.com/sebastien-comeau/next-i18next-analytics Please review the console logs to observe that, during the event triggered by the router known as routeChangeComplete, the value of document.title often corresponds to the previous page's value. However, when I log the value again after a 500ms delay, it displays the correct value because i18next has finished rendering. – sebascomeau Jun 22 '23 at 13:09

0 Answers0