如何在next-i18next加载翻译后执行代码？

问题原因 #

你之前监听的initialized和loaded事件没触发，是因为Next.js客户端渲染流程中，next-i18next的初始化往往在组件挂载前就完成了，等你在组件里添加监听时，这些事件已经执行过了。

解决方案 #

方法一：利用useTranslation的ready状态监听 #

useTranslation返回的ready属性会在翻译资源完全加载后变为true，可以结合useEffect监听这个状态，先更新document.title，再执行目标代码：

import { useTranslation } from 'next-i18next'
import { useEffect, useState } from 'react'

function MyComponent() {
  const { t, ready } = useTranslation()
  const [isTitleSet, setIsTitleSet] = useState(false)

  // 先更新页面标题
  useEffect(() => {
    if (ready) {
      document.title = t('page.title') // 替换成你的翻译key
      setIsTitleSet(true)
    }
  }, [ready, t])

  // 标题更新后执行目标代码
  useEffect(() => {
    if (ready && isTitleSet) {
      // 这里放置你需要执行的代码
      console.log('翻译加载完成，标题已更新，执行目标逻辑')
      // 重置状态避免重复执行
      setIsTitleSet(false)
    }
  }, [ready, isTitleSet])

  // 翻译未加载完成时显示加载态
  if (!ready) {
    return <div>加载中...</div>
  }

  return <div>你的组件内容</div>
}

export default MyComponent

方法二：监听语言切换事件（适用于多语言切换场景） #

如果需要在切换语言后重复执行逻辑，可以监听languageChanged事件，结合i18n.isLoading判断翻译是否加载完成：

import { useTranslation } from 'next-i18next'
import { useEffect } from 'react'

function MyComponent() {
  const { t, i18n, ready } = useTranslation()

  useEffect(() => {
    if (!ready) return

    // 初始加载时执行一次
    executeAfterTitleUpdate()

    // 监听语言切换
    const handleLanguageChange = () => {
      // 轮询检查翻译是否加载完成
      const checkInterval = setInterval(() => {
        if (!i18n.isLoading) {
          clearInterval(checkInterval)
          executeAfterTitleUpdate()
        }
      }, 100)
    }

    i18n.on('languageChanged', handleLanguageChange)

    // 组件卸载时移除监听
    return () => {
      i18n.off('languageChanged', handleLanguageChange)
    }
  }, [ready, i18n, t])

  const executeAfterTitleUpdate = () => {
    document.title = t('page.title') // 替换成你的翻译key
    // 这里放置你需要执行的代码
    console.log('翻译加载完成，标题已更新，执行目标逻辑')
  }

  if (!ready) {
    return <div>加载中...</div>
  }

  return <div>你的组件内容</div>
}

export default MyComponent

内容的提问来源于stack exchange，提问作者Greg Baker