Dynamic routing static export makes it hard to route in S3 + Cloudfront [NextJS]

Question

I'm using a dynamic routing template to manage nested paths.

I'm serving everything static with S3 Cloudfront and had to remove .html from the exported Next files to support the deployment environment chosen.

I'm finding it very difficult to resolve solutions/a.html because when I try to rename it it clashes with the folder name a.

In a way a.html should probably be index.html within the a/ folder, but that will cause issues with Cloudfront which only support index.html files for root files.

Is there a way to fix this or maybe update my out config - I was thinking I could use the exportPathMap to define the paths as needed.

/pages
   /solutions
      [...id].tsx

Out folder export (redacted):

└── solutions
   ├── a
   |  ├── b
   |  ├── b.html
   |  ├── c
   |  ├── c.html
   ├── a.html

Answer 1

Ended up having to flatten the structure of solutions. This solved my issues with a.html not being able to be renamed to a because of the a/ folder.

Now that this was achieved all that was left was to change the ContentType to text/html. I achieved this using the serverless-s3-sync package which has a params prop.

└── solutions
   ├── a
   ├── a.html
   ├── b
   ├── b.html
   ├── c
   ├── c.html