NextJS中Cannot set headers after they are sent to the client错误求助

核心错误原因 #

cannot set headers after they are sent to the client 错误的直接原因是你的 IsUserWelcome API路由 在同一个请求中多次调用了res.json()，导致响应头被重复设置。

当cliresponse.newUser == true时，你已经用res.status(200).json(cliresponse.newUser)发送了一次响应，但之后没有终止函数执行，代码继续走到了res.status(200).json({ cliresponse });，再次尝试发送响应，触发了这个错误。

修复API路由 #

修改API路由代码，在发送响应后添加return终止函数，同时处理用户不存在的边界情况：

import type { NextApiRequest, NextApiResponse } from 'next';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const { email } = req.body;

    const cliresponse = await prisma.user.findFirst({
      where: {
        email,
      },
    });
    
    // 处理用户不存在的情况，避免后续访问属性报错
    if (!cliresponse) {
      return res.status(404).json({ error: "用户不存在" });
    }

    console.log(cliresponse.newUser);
    if (cliresponse.newUser === true) {
      // 发送响应后立即终止函数
      return res.status(200).json(cliresponse.newUser);
    }
    // 仅当条件不满足时执行此响应
    res.status(200).json({ cliresponse });
  } catch (err) {
    console.log(err);
    res.status(500).json({ error: err });
  }
}

优化WelcomeContainer组件 #

你的WelcomeContainer直接在函数体中调用fetch，会导致组件每次渲染都发送请求，浪费资源且可能引发重复请求。需将请求逻辑放入useEffect，仅在依赖项变化时执行：

const WelcomeContainer: React.FC = () => {
    const { data: sessionData } = useSession();
    const [welcomeMessage, setWelcomeMessage] = useState<JSX.Element | null>(null);

    useEffect(() => {
        // 确保session数据存在时才发起请求
        if (!sessionData?.user?.email) return;

        const payload = JSON.stringify({
            email: sessionData.user.email,
        });
        
        fetch('/api/userService/isuserwelcome', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: payload
        })
        .then(response => response.json())
        .then(data => {
            console.log(data);
            // 根据API返回的格式判断：如果直接返回true则用data === true，若返回对象则需对应调整判断逻辑
            if (data === true) {
                setWelcomeMessage(
                    <div className={styles.welcomeContainer}>
                        <h1>Welcome to the Los pollos hermanos family.</h1>
                    </div>
                );
            }
        })
        .catch(error => {
            console.error(error);
        });
    }, [sessionData]); // 依赖sessionData，会话变化时重新请求

    return (
        <>
            {welcomeMessage}
        </>
    );
};

额外提示 #

• 给useState添加TypeScript类型声明，避免隐式any类型。
• 确保API返回格式与前端判断逻辑一致，避免因数据格式不匹配导致欢迎消息不显示。

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