在Next.js与Medusa.js项目中使用"use client"触发服务器组件错误

问题描述 #

开发基于Next.js和Medusa.js的电商项目时，给组件添加"use client"指令以使用useState、useEffect等客户端交互功能，却触发了"Server Component Error"，阻碍正常客户端渲染。

相关代码（pages/product.js）：

"use client";

import { useState, useEffect } from 'react';

const Product = ({ product }) => {
    const [quantity, setQuantity] = useState(1);

    useEffect(() => {
        // Fetch additional product details, simulating an API call
        console.log('Fetching additional details...');
    }, []);

    const handleAddToCart = () => {
        // Add to cart logic
    };

    return (
        <div>
            <h1>{product.name}</h1>
            <p>{product.description}</p>
            <input
                type="number"
                value={quantity}
                onChange={(e) => setQuantity(e.target.value)}
            />
            <button onClick={handleAddToCart}>Add to Cart</button>
        </div>
    );
};

export default Product;

具体问题点：

• 文件顶部添加"use client";后仍触发"Server Component Error"
• pages/product.js中的Product组件被隐式视为服务器组件
• 查阅Next.js文档后仍不确定如何调整组件结构规避错误

核心原因 #

Next.js Pages Router中，pages/目录下的文件默认是服务器组件，添加"use client"后会转为客户端组件，但如果存在以下情况会触发错误：

1. 父组件（页面本身）作为服务器组件，传递了不可序列化的product props给客户端组件
2. Medusa返回的产品对象包含函数、Symbol等不可序列化属性，无法在服务器与客户端之间传递

解决方案 #

1. 拆分组件：分离数据获取与客户端交互 #

将页面拆分为两部分：

• 服务器组件（pages/product.js）：负责从Medusa获取产品数据，传递可序列化的props
• 客户端组件（components/ProductClient.js）：处理交互逻辑，添加"use client"指令

服务器组件（pages/product.js）

import ProductClient from '../components/ProductClient';

// 从Medusa获取产品数据，实际逻辑根据Medusa API调整
export async function getServerSideProps(context) {
  const res = await fetch(`your-medusa-api-url/products/${context.params.id}`);
  const rawProduct = await res.json();

  // 只保留可序列化的字段，过滤掉函数、Symbol等不可序列化属性
  const product = {
    id: rawProduct.id,
    name: rawProduct.name,
    description: rawProduct.description,
    price: rawProduct.price
  };

  return { props: { product } };
}

const ProductPage = ({ product }) => {
  return <ProductClient product={product} />;
};

export default ProductPage;

客户端组件（components/ProductClient.js）

"use client";

import { useState, useEffect } from 'react';

const ProductClient = ({ product }) => {
    const [quantity, setQuantity] = useState(1);

    useEffect(() => {
        console.log('Fetching additional details...');
    }, []);

    const handleAddToCart = () => {
        // 这里添加Medusa购物车API调用逻辑
    };

    return (
        <div>
            <h1>{product.name}</h1>
            <p>{product.description}</p>
            <input
                type="number"
                value={quantity}
                onChange={(e) => setQuantity(Number(e.target.value))}
                min={1}
            />
            <button onClick={handleAddToCart}>Add to Cart</button>
        </div>
    );
};

export default ProductClient;

2. 确保props可序列化 #

传递给客户端组件的product数据必须是JSON可序列化的，避免传递Medusa返回对象中的嵌套函数、特殊对象等，只保留业务需要的基础字段（如id、name、price等）。

3. 版本兼容性检查 #

确保使用Next.js 13.4及以上版本，该版本在Pages Router中对"use client"指令的支持更稳定，早期版本可能存在兼容性bug。

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