So I have a server component/page: /projects/[slug]/page.tsx
which is a single page for a specific project. I know this should be a client component but since this is for my portfolio website, it's fine this way.

I have all of my project details with this file structure:

- public
- warehouse
- projects
- project-name-1 and so on..

And my code for [slug]/page.tsx looks like:

To fetch all of my project titles

function getAllDirectFolderNames(path: string) {
  return fs
    .readdirSync(path, { withFileTypes: true })
    .filter((dirent) => dirent.isDirectory())
    .map((dirent) => dirent.name);
}

export async function generateStaticParams() {
  const projectTitles = getAllDirectFolderNames(
    withPublic(WAREHOUSE.ProjectDir, '')
  );
  const params = projectTitles.map((title) => ({
    params: {
      slug: title,
    },
  }));
  return params;
}

For project details fetching

const getProject = cache(async (slug: string): Promise<IProject | null> => {
  // fs reading fom project[slug]'s index.json, doing stuffs and returning the project
  return project;
});

UI to be rendered

export default async function Project({
  params: { slug },
}: {
  params: { slug: string };
}) {
  const projectTitle = decodeURI(slug);
  const project = await getProject(projectTitle);

// blah blah

It successfully builds,

npm run start

running build locally, everything works fine.
Eg.

http://localhost:3000/projects/my-project

but,

It throws an error

Internal Server Error 500

on production.
Eg.

https://example.com/projects/my-project

So, my question is, am I trying to achieve something that's not possible or I'm doing it wrong way (if so guide me how do I do it the right way).

Thanks in advance.