Next.js - export index.html

Question

I would like to host my React Project on Amazon S3.

I am developing it with Next.js.

the folder tree is like below this.

pages
 |- auth
 |    |- index.tsx
 |- (...)
 |- index.tsx

and I did

next build && next export

After building and exporting, I expected it

out
 |- _next
 |- auth
 |    |- index.html /* I want another index.html */
 |- (...)
 |- index.html
 |- static

but I got it,

 |- _next
 |- auth.html /*I need /auth/index.html*/
 |- (...)
 |- index.html
 |- static

How could I achieve it.

Thank you in advance.

Answer 1

https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash

Just add exportTrailingSlash: true to next.config.js.

module.exports = {
  trailingSlash: true,
}

Answer 2

next.config.js

module.exports = {
  exportPathMap: async function (defaultPathMap) {
    return {
      '/auth/index.html': { page: '/auth' },
    };
  }
}