Whenever I attempt to open a dynamic route in my nextjs project I'm redirect to the root page ('/'). This only happens in production as in development mode I'm not getting this error and It works perfectly.
This is what my folder structure looks like.

This is what my [slug]/page.tsx contains:

'use client';
import { Bounce, ToastContainer } from "react-toastify";
import { DiscussionReplyTab, DiscussionTopicTab } from "@/components/ui";
import { useParams } from "next/navigation";
import { useEffect } from "react";

const ViewDiscussion = () => {
const params = useParams<{slug: string}>();

useEffect(() => {
console.log(params);
}, [params]);

return (
<main className="pt-5 pb-10">
<div className="fixed">
<ToastContainer
position="bottom-right"
autoClose={2500}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover={false}
theme="light"
transition={Bounce}
></ToastContainer>
</div>

{/* Discussion Topic Tab */}
<DiscussionTopicTab id={params.slug} />

<div>
<div className="mt-14">
<p className="text-[#201F1F] text-base font-semibold">Replies</p>
<DiscussionReplyTab id={params.slug} />
</div>
</div>
</main>
);
};

export default ViewDiscussion;

I have used the generateStaticParams() but when I create a new post after the site has built, and I try to open the new link I'm redirected to the root page

this is my use of generateStaticParams

export async function generateStaticParams() {
const discussions = await fetch(${BASE_URL}/forums, {
cache: 'no-store',
next: { revalidate: 0 },
});
const the_discussions = (await discussions.json()) as { data: IDiscussion[] };

return the_discussions.data.map((post) => ({
slug: post.uid,
}));
}

Any suggestions please?