When someone visit my root directory "https://example.com/" i want to render a normal .html file. (index.html) How can i be able to do that with next.js?

I did a research and edit my config file like this,

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  rewrites: async () => {
    return [
      {
        source: "/public/myfile.html",
        destination: "/pages/api/myfile.js",
      },
    ];
  },
};

/pages/api/myFile.js

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

but this config file rendering my .html page just when i hit this url: https://example.com/index.html