How can i get the name of images and use the images

In product page, I want to get all images path that are in a specific folder and send those to client side, so I can use them in client side by passing the paths to Image component of next js. I tried this when I was developing my app via running npm run dev and it was successful. Then I pushed the changes to my GitHub repository and vercel built my app again. Now, when I go to the product page, I get an error from the server. I tried some ways to fix this problem, but I couldn't fix that. For example, I tried changing my entered path in readdir, but the problem didn't fix. Here are my codes:

const getPagePhotosAndReview = async (productName) => {
  const root = process.cwd();
  let notFound = false;
  const allDatas = await fs
    .readdir(root + `/public/about-${productName}`, { encoding: "utf8" })
    .then((files) => {
      const allDatas = { pageImages: [], review: null };
      files.forEach((value) => {
        const image = value.split(".")[0];
        const imageInfos = {
          src: `/about-${productName}/${value}`,
          alt: productName,
        };
        if (Number(image)) {
          allDatas.pageImages.push(imageInfos);
        }
      });

      return allDatas;
    })
    .catch((reason) => (notFound = true));

  if (notFound) return 404;

  await fs
    .readFile(root + `/public/about-${productName}/review.txt`, {
      encoding: "utf-8",
    })
    .then((value) => {
      allDatas.review = value;
    })
    .catch((reason) => {
      allDatas.review = null;
    });

  return allDatas;
};

export async function getServerSideProps(context) {
  if (context.params.product.length > 3) {
    return { notFound: true };
  }

  if (context.params.product.length < 3) {
    const filters = {
      kinds: originKinds[context.params.product[0]] || " ",
    };

    if (context.params.product[1]) filters.brands = context.params.product[1];

    const products = getFilteredProducts(filters, true);

    if (products.datas.length === 0) {
      return {
        notFound: true,
      };
    }

    return {
      props: {
        products: { ...products },
      },
    };
  }

  if (context.params.product.length === 3) {
    const filters = {
      path: context.resolvedUrl,
    };

    const product = getFilteredProducts(filters, false);

    if (product.length === 0) {
      return {
        notFound: true,
      };
    }

    const splitedPath = product[0].path.split("/");
    const pagePhotosAndReview = await getPagePhotosAndReview(
      splitedPath[splitedPath.length - 1]
    );

    if (pagePhotosAndReview === 404) return { notFound: true };

    product[0] = {
      ...product[0],
      ...pagePhotosAndReview,
    };

    product[0].addressArray = [
      textOfPaths[context.params.product[0]],
      textOfPaths[context.params.product[1]],
    ];

    return {
      props: {
        product: product[0],
      },
    };
  }
}

This is the base code and I tried some ways but couldn't fix the problem. So to fix this problem, I want to ask: how can I get the name of all images in a specific directory and then use those images in client side? And errors that I get: if I go to a page directly and without going to the home of the website, I get internal server error with code of 500 and when I go to a page of my website, and then I go to my product page, I get

Application error: a client-side exception has occurred (see the browser console for more information).

And I should say that I know I should remove public from paths when I want to load an image from public folder. I did it but I still get error.