Next.js 14构建后switch语句无法正确显示价格格式化字符串

问题场景 #

• Next.js从12版本升级到14版本后，价格格式化函数在生产环境出现异常：根据locale格式化价格时，例如locale为'sv'时本该显示“100 kr”，但生产环境UI仅显示“100”，缺失货币标识。
• 本地开发环境功能正常，仅生产构建后出现差异；生产环境中console.log(process.env.locale)输出为'sv'，手动拼接${formattedPrice} kr也能得到正确字符串，但UI显示不符。
• 将switch语句外的return替换为switch内的default分支返回默认值后，问题解决。

两种写法对比 #

写法1（本地正常，生产构建后异常） #

switch (locale) {
  case 'sv':
    return `${formattedPrice} kr`;
  case 'nb':
    return `kr ${formattedPrice}`;
  case 'da':
    return `kr. ${formattedPrice}`;
  case 'fi':
    return `${formattedPrice} €`;
}

return formattedPrice;

写法2（本地及生产构建后均正常） #

switch (locale) {
  case 'sv':
    return `${formattedPrice} kr`;
  case 'nb':
    return `kr ${formattedPrice}`;
  case 'da':
    return `kr. ${formattedPrice}`;
  case 'fi':
    return `${formattedPrice} €`;
  default:
    return formattedPrice;
}

差异原因分析 #

两种写法的核心差异在于switch语句逻辑的完整性，结合Next.js 14的生产构建优化逻辑，具体原因如下：

1. 生产构建的激进优化：Next.js 14使用更严格的代码压缩和静态分析工具（如Terser），写法1中switch无default分支，且return语句在switch外部，编译器可能在静态分析时误判：认为没有case会被匹配，直接将逻辑跳转到最后的return formattedPrice，跳过了switch内的case匹配流程。
2. 环境变量的静态注入：Next.js 14生产环境中环境变量是静态注入的，写法1的结构可能让编译器误以为switch后的return是默认执行路径，而写法2通过default分支明确将默认返回逻辑纳入switch语句的一部分，编译器会保留完整的case匹配逻辑，不会跳过case判断。
3. 代码可达性判断：写法1中switch后的return属于“潜在不可达代码”，但在生产构建优化时，编译器可能错误地将其标记为“必然执行”，而写法2的default分支明确了所有未匹配case的处理逻辑，消除了编译器的误判空间。

结论 #

写法2通过在switch内部添加default分支，明确了完整的逻辑分支覆盖，避免了Next.js 14生产构建优化带来的逻辑误判，从而解决了生产环境下价格格式化异常的问题。

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