Having crafted a serverless application using next.js, Vercel, and Google Sheets to store customer contact data, I encountered an issue post-deployment. While my application works flawlessly locally, after deployment, I started receiving the following error:
error - Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at new NodeError (node:internal/errors:371:5) at ServerResponse.setHeader (node:_http_outgoing:576:11) at ServerResponse._res.setHeader (F:\javascript\ethiostar\node_modules\next\dist\server\base-server.js:129:24) ...
Below is my feedback component in Next.js:
'use client';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
export default function Feedback() {
const { register, handleSubmit, reset } = useForm();
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [alertMessage, setAlertMessage] = useState('');
// Rest of the code for the Feedback component goes here...
}This is the logic implemented in submit.js:
import { google } from 'googleapis';
export default async function handler(req, res) {
if (req.method === 'POST') {
const { Name, Email, Message } = req.body;
// Logic for handling POST request and saving data to Google Sheets
res.status(201).json({ message: 'Data entered successfully' });
}
res.status(200).json({ message: 'Done!' });
}If anyone can help me troubleshoot this issue, it would be greatly appreciated. I've tried ChatGPT without success.