Next JS Slug Page won work on vercel deployment - next.js

Question

I made a website with NextJS and deployed it on Vercel.
From url: https://etiselektrik.vercel.app/teknikbilgi/ if i click the first article. The page loads without any problem.
However if i directly enter the url with the slug page: https://etiselektrik.vercel.app/teknikbilgi/reaktifenerji-reaktifceza I get 500 internal server error.
I dont have this error in my production build.
Here is my code for the slug page:
import ReactHtmlParser from 'react-html-parser';
import Layout from '../../components/Layout';
import { API_URL } from '../../config/index';
export default function BlogPost({ post }) {
return (
<Layout
title={post.title}
description={post.metaDescription}
keywords={post.metaKeywords}
>
<h1 className='px-4 py-4 md: my-4 simpleContainer font-semibold text-2xl text-secondary text-left'>
{post.title}
</h1>
<div className='px-4 simpleContainer text-secondary'>
{ReactHtmlParser(post.content)}
</div>
</Layout>
);
}
export async function getServerSideProps({ query: { slug } }) {
try {
const res = await fetch(`${API_URL}/teknikbilgis/${slug}`);
const post = await res.json();
return {
props: {
post: post,
},
};
} catch {
return {
props: {
post: {},
},
};
}
}

Answer 1

I found the issue. On the client side, i used .replaceAll function to change my post before parsing. (I didnt add them in my code as i thought it was irrelevant)
.replaceAll() seems to cause problems in nextjs on deployment. I changed it to .replace() Now it works.