NextJS配置i18n后通过useRouter获取locale为undefined如何解决

问题修复方案 #

• 1. 重启开发服务
     修改next.config.js后不会触发热更新，必须手动停止当前运行的开发服务，重新执行npm run dev或yarn dev启动，i18n配置才会生效，这是导致locale返回undefined的最常见原因。
• 2. 修正locale判断逻辑
     你配置文件中声明的locale值为en-US、pt-BR带区域后缀的格式，但代码中判断用的是locale === 'pt'简写格式，二者完全不匹配，就算locale正常获取也永远无法命中葡萄牙语资源。
     你可以二选一修改：
  • 将next.config.js中的locales配置改为['en', 'pt']
  • 或者将pages/index.js中的判断逻辑改为const t = locale === 'pt-BR' ? pt : en;
• 3. 修正资源引入路径
     你代码中写的是import pt from '../locale/index/pt'，但实际提供的资源文件路径是/locale/pt.js，多了一层不存在的index目录，修正为以下路径即可：

import pt from '../locale/pt'
import en from '../locale/en'

• 4. 处理首屏初始化延迟
     NextJS 12的useRouter实例在首屏首次渲染时可能存在i18n参数挂载延迟，可以监听router的ready状态再获取locale，避免取到空值：

import { useEffect } from 'react'
import Head from 'next/head'
import { useRouter } from 'next/router'

import pt from '../locale/pt'
import en from '../locale/en'

export default function Home() {
    const router = useRouter();
    const t = router.locale === 'pt-BR' ? pt : en;

    useEffect(() => {
      if(router.isReady) {
        const { locale } = router;
        console.log("Locale: " + locale);
        console.log(router);
      }
    }, [router.isReady])

    return (
        <div className="container">
            <Head>
                <title>{t.title}</title>
            </Head>
        </div>
    )
}

内容的提问来源于stack exchange，提问作者Maykel Esser