I have a next.js react app that is serving several static projects in the public folder:

public/
  ├── project1/
  |   ├── index.html
  |   ├── script.js
  |   └── ...
  ├── project2/
  |   ├── index.html
  |   ├── script.js
  |   └── ...
  └── ...

However, going to localhost:3000/project1 results in a 404 page, and I have to go to localhost:3000/project1/index.html for it to work.

How can I omit the index.html, so going to localhost:3000/project1 works?

I tried doing this in my next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: "/project1",
        destination: "/project1/index.html",
      },
    ];
  },
};

export default nextConfig;

Now I can see the page in localhost:3000/project1, but it can no longer read the js and all other assets because it read from localhost:3000/script.js instead of localhost:3000/project1/script.js.

Most of these projects are quite big so I cannot manually change the relative path of everything in there.