not sure why there are any errors because my application, when run locally, doesnt have any errors. this only happes when i deploy it to vercel.
this is the relevant part of the code:
api/contact - route.js
import connectDB from "@/app/lib/mongodb";
import Contact from "@/app/models/contact";
import { NextResponse } from "next/server";
import mongoose from "mongoose";
export async function POST(req) {
const { fullname, message } = await req.json();
try {
await connectDB();
await Contact.create({ fullname, email, message });
return NextResponse.json({
msg: ["Message sent successfully"],
success: true,
});
} catch (error) {
if (error instanceof mongoose.Error.ValidationError) {
let errorList = [];
for (let e in error.errors) {
errorList.push(error.errors[e].message);
}
console.log(errorList);
return NextResponse.json({ msg: errorList });
} else {
return NextResponse.json({ msg: ["Unable to send message."] });
}
}
}```
contactform.jsx -
```js
"use client";
import { useState } from "react";
export default function ContactForm() {
const [fullname, setFullname] = useState("");
const [message, setMessage] = useState("");
const [error, setError] = useState([]);
const [success, setSuccess] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
const res = await fetch("api/contact", {
method: "POST",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify({
fullname,
message,
}),
});
const { msg, success } = await res.json();
setError(msg);
setSuccess(success);
if (success) {
setFullname("");
setMessage("");
}
};
return(*the form*)