Next.js not bundling public folder contains

Question

I am having an issue with Next.js where neither the ./public nor ./private folders are bundled in the final /.next deployable folder. That means on my machine the app is working smoothly but on Vercel it does not because it could not find those folders.

I've searched through the entire /.next folder hoping I could find the spot where Next.js is saving the ./public folder but without success.

package.json

{
  "name": "api-suburbia-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "mime": "^2.5.2",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2"
  }
}

pages/api/image/[id].js

import { promises } from "fs";
const { stat } = promises;

import {createReadStream, existsSync} from "fs"
import path from "path"
import mime from "mime"

export default async function handler(req, res) {
    const lastMintedId = 100;
    const { id } = req.query;

    const someFilePath = path.resolve('./private/' + id + '.json');
        
    // if file is not located in specified folder then stop and end with 404
    if (!existsSync(someFilePath)) return res.json({ message: 'The file is not there.' })

    // Create read stream from path and now its ready to serve to client
    const file = createReadStream(path.resolve('./private/' + id + '.json'))
    
    // set cache so its proper cached. not necessary
    // 'private' part means that it should be cached by an invidual(= is intended for single user) and not by single cache. More about in https://stackoverflow.com/questions/12908766/what-is-cache-control-private#answer-49637255
        res.setHeader('Cache-Control', `private, max-age=5000`);
    
    // set size header so browser knows how large the file really is
    // im using native fs/promise#stat here since theres nothing special about it. no need to be using external pckages
    const stats = await stat(someFilePath);
    res.setHeader('Content-Length', stats.size);
    
    // set mime type. in case a browser cant really determine what file its gettin
    // you can get mime type by lot if varieties of methods but this working so yay
    const mimetype = mime.getType(someFilePath);
    res.setHeader('Content-type', mimetype);


    // Pipe it to the client - with "res" that has been given
    file.pipe(res);
}

Locally I get the actual file. On Vercel I get { message: 'The file is not there.' }