I have a Next.js project when I deploy to Heroku there is no error an application works correctly however when I want to deploy the application in Vercel at the end it gives such an error.
and this [...params].js file:
// ...params.js
import React, { useMemo, useState } from "react";
import { useRouter } from "next/router";
import MainLayout from "../../common/components/templates/GeneralTemplate";
import DashboardLayout from "../../common/components/templates/DashboardTemplate";
import LicensedPros from "../../common/components/infopages/licensedPros/LicensedPros";
import absoluteUrl from "next-absolute-url";
import { getSession } from "next-auth/react";
import StepFive from "../../common/components/register/StepFive";
import StepFouth from "../../common/components/register/StepFouth";
import StepThree from "../../common/components/register/StepThree";
import StepTwo from "../../common/components/register/StepTwo";
import StepSixth from "../../common/components/register/StepSixth";
const ApplicantType = ({ data, describeData }) => {
const router = useRouter();
const [type] = router.query.params;
const [index, setIndex] = useState(0);
const nextPage = () => {
if (index + 1 === 6) {
router.push("/discovery");
return;
}
setIndex(index + 1);
// ️ scroll to top on page load
window.scrollTo({ top: 0 });
};
let ApplicationForm = (
<>
<div className="container mx-auto grid justify-items-center ">
<LicensedPros
serverData={data}
describeData={describeData}
edit={false}
nextPage={nextPage}
/>
</div>
</>
);
const renderPages = useMemo(() => {
console.log(index);
if (index === 0) {
return <StepSixth setStep={nextPage} userType="licensed professionals" />;
}
if (index === 1) {
return ApplicationForm;
}
if (index === 2) {
return <StepFive setStep={nextPage} userType="licensed professionals" />;
}
if (index === 3) {
return <StepFouth setStep={nextPage} type="applicants" />;
}
if (index === 4) {
return <StepThree setStep={nextPage} />;
}
return <StepTwo setStep={nextPage} userType="licensed professionals" />;
}, [index]);
if (type === "info-page") {
return (
<MainLayout>
<> {renderPages}</>
</MainLayout>
);
}
if (type === "edit") {
return (
<DashboardLayout headerTitle={"APPLICANTS EDIT INFO"}>
<div className="container mx-auto grid justify-items-center ">
<LicensedPros
serverData={data}
edit={true}
describeData={describeData}
/>
</div>
</DashboardLayout>
);
}
return <div></div>;
};
export default ApplicantType;
export async function getServerSideProps(context) {
const session = await getSession(context);
if (session && session?.user?.type) {
const { origin } = absoluteUrl(context.req);
try {
await fetch(`${origin}/api/mail/signup`, {
method: "POST",
mode: "same-origin",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(session),
});
const req = await fetch(`${origin}/api/info-page`, {
method: "POST",
body: JSON.stringify({ token: session?.jwt }),
});
const data = await req.json();
//get user describe options
const describe = await fetch(`${origin}/api/describe-you`, {
method: "POST",
body: JSON.stringify({ token: session?.jwt, type: "applicant" }),
});
const { describeData } = await describe.json();
return {
props: {
data: data,
describeData: describeData.data,
}, // will be passed to the page component as props
};
} catch (err) {
return {
props: {
data: [],
describeData: [],
}, // will be passed to the page component as props
};
}
} else {
return {
redirect: {
destination: "/",
},
};
}
}
To put all in all I can deploy the project in Heroku and works as I expected however in vercel gives that error which I mentioned and references this file as an error, I would appreciate any help thanks in advance.

