NextJS13服务端调用createIntl报‘createContext仅支持客户端组件’错误

问题根源 #

虽然react-intl文档声称createIntl适用于无React上下文的后端场景，但实际在NextJS 13服务端动作中调用时触发createContext错误，核心原因是：

• 直接从react-intl包导入的createIntl，其内部实现仍依赖了React客户端相关API
• 服务端动作的执行逻辑被意外混入客户端代码（比如工具函数被客户端组件直接引用）

具体解决步骤 #

1. 切换到纯核心包的createIntl
   使用@formatjs/intl-core提供的createIntl，这个包是react-intl的底层核心，完全脱离React上下文依赖：

   // 替换原有导入路径
   import { createIntl } from '@formatjs/intl-core';
   

   该方法的参数和react-intl的createIntl完全兼容，直接沿用原有配置即可。

2. 严格隔离服务端动作的执行环境

   • 服务端动作所在文件顶部必须添加"use server"指令，明确标记为服务端执行：

     "use server";
     
     import { createIntl } from '@formatjs/intl-core';
     
     export async function yourServerAction() {
       const intl = createIntl({
         locale: 'zh-CN',
         messages: { /* 你的本地化文案对象 */ }
       });
       // 调用intl.formatMessage等方法处理文案
     }
     

   • 禁止在客户端组件中直接调用该工具函数，必须通过表单action属性、服务端动作钩子等NextJS官方允许的方式触发，确保代码完全在服务端运行。

3. 验证本地化配置的纯净性
   传递给createIntl的messages必须是纯JSON对象，不能包含任何React组件、hooks或客户端专属代码，避免意外引入客户端依赖。

额外排查点 #

• 若项目未安装@formatjs/intl-core，先执行安装：

  npm install @formatjs/intl-core
  # 或
  yarn add @formatjs/intl-core
  

• 检查服务端动作文件是否被客户端组件直接导入，所有调用必须通过服务端动作的触发机制完成。

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