next js dynamic page routing working in localhost but giving file not found error in production

This is part of my next js project. This website is running perfectly on localhost but when i deploy it on vercel, the /blogs/book/chapter page is giving me file not found enter image description here500 error.

Hosted Page - Website Source Code - GitHub

Dynamic Routing Folder Structure

Page Structure

chapter.js

import fs from "fs";
import path from "path";
import Head from "next/head";
import DefaultErrorPage from "next/error";
import { useRouter } from "next/router";
import matter from "gray-matter";
import { marked } from "marked";
import styles from "../../../../styles/blog/Chapter.module.css";
import { capitalise } from "../../../../components/blog/Capitalise";
import BlogPostBottom from "../../../../components/blog/BlogPostBottom";

export default function Chapter({ book, chapter, frontmatter, content }) {
    // Destructuring
    const { description } = frontmatter;

    // Router Variable
    const router = useRouter();

    // If fallback then show this
    if (router.isFallback) {
        // if (router.isFallback || !book || !chapter || !content) {
        return <div>Loading...</div>;
    }

    if (!book || !chapter || !content || !frontmatter) {
        return (
            <div>
                <DefaultErrorPage statusCode={404} />
            </div>
        );
    }

    return (
        <div className={styles.bookChapter}>
            <Head>
                <title>{`${capitalise(chapter)} | ${capitalise(
                    book
                )} | Blog | Manav Goyal`}</title>
                <meta
                    name="description"
                    content={`Read Blog about this book ${book} covering chapter ${chapter} of topics ${description}`}
                />
            </Head>

            <h1>{`${capitalise(chapter)} - ${capitalise(book)}`}</h1>

            <section
                className={styles.bookChapterContent}
                dangerouslySetInnerHTML={{ __html: marked(content) }}
            ></section>

            <BlogPostBottom slug={`/blog/${book}`} />
        </div>
    );
}

export async function getStaticPaths() {
    return {
        paths: [{ params: { book: "css", chapter: "bootstrap" } }],
        // paths: [],
        fallback: true,
    };
}

// Web crawlers, won't be served a fallback and instead the path will behave as in fallback: 'blocking'
// fallback: true is not supported when using `next export`
export async function getStaticProps({ params }) {
    const { book, chapter } = params;

    let chapterPost = null;
    try {
        chapterPost = await fs.promises.readFile(
            path.join(`posts/${book}/${chapter}.md`),
            "utf-8"
        );
    } catch (err) {}

    const { data: frontmatter, content } = matter(chapterPost);

    return {
        props: {
            book,
            chapter,
            frontmatter,
            content,
        },
        // redirect: {
        //  destination: `/blog/${book}`,
        //  permanent: false,
        // },
        // revalidate: 1,
    };
}

Chapter.defaultProps = {
    book: "css",
    chapter: "bootstrap",
    frontmatter: { description: "CSS", id: "1" },
    content: "Error",
};

Posts Folder Structure

Posts Folder Structure

Error

Console

Vercel Function Log