Next.js 13：服务器组件向客户端组件传递Date对象的序列化问题

方法1：继续用next-superjson适配App Router #

你之前用的next-superjson可以直接适配App Router，无需手动全量转字符串，步骤如下：

1. 确保依赖安装：npm install next-superjson superjson
2. 修改next.config.js添加插件配置：

   // next.config.js
   const withSuperJSON = require('next-superjson')();
   
   module.exports = withSuperJSON({
     // 你的现有Next.js配置，比如experimental、images等
   });
   

3. 在服务器组件中正常获取包含Date的数据，直接传递给客户端组件即可——插件会自动处理Date类型的序列化/反序列化，不用手动转换。

方法2：自定义序列化/反序列化工具 #

如果不想依赖第三方库，写个简单的工具函数自动处理Date：

• 服务器端序列化时，把Date转成ISO字符串：

  function serializeData(data) {
    return JSON.parse(JSON.stringify(data, (key, value) => {
      return value instanceof Date ? value.toISOString() : value;
    }));
  }
  

  在服务器组件中调用这个函数处理数据后，再传给客户端组件。
• 客户端组件接收后，把ISO字符串转回Date：

  function deserializeData(data) {
    return JSON.parse(JSON.stringify(data), (key, value) => {
      if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(value)) {
        return new Date(value);
      }
      return value;
    });
  }
  

  或者渲染时直接对目标字段转换：new Date(item.dateField)。

方法3：在Server Components处理日期逻辑 #

既然API调用在服务器组件完成，你可以直接在服务器端完成按日期筛选排序的逻辑，只把处理后的最终数据传给客户端组件——如果不需要客户端操作Date，甚至可以直接转成格式化后的字符串，彻底避免序列化问题。示例：

// 服务器组件
async function ServerComponent() {
  const rawData = await fetch('/api/data').then(res => res.json());
  // 服务器端完成筛选排序
  const sortedData = rawData.sort((a, b) => new Date(a.date) - new Date(b.date));
  // 转成客户端需要的格式，比如直接格式化日期字符串
  const processedData = sortedData.map(item => ({
    ...item,
    formattedDate: new Date(item.date).toLocaleDateString('zh-CN')
  }));
  return <ClientComponent data={processedData} />;
}

以上几种方法都比手动逐个字段转字符串更便捷，优先推荐方法1，沿用你之前熟悉的工具，迁移成本最低。

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