trailingSlash + custom 404 + next export defaults to default 404 page.

Bug report

Describe the bug

When using a trailing slash (e.g. /about/) and a custom 404 page, the custom 404 page does not appear, rather the default 404 page is used instead.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create and set trailingSlash: true in next.config.js
2. Create a 404.js page in the /pagesfolder (pages/404.js)
3. Run yarn next build and yarn next export
4. Run yarn next dev
5. Go to a page that does not exist and you see the defualt 404 page.

Reproduction Repo:

http://github.com/pateljoel/nextjs-issue-16528

Expected behavior

My own custom 404 page on every page that does not exist.

System information

• OS: macOS
• Browser Chrome
• Version of Next.js: 9.5.2
• Version of Node.js: v12.16.2

[cleversprocket]

I was able to hack a workaround by including a /404 export in the path map and copying the file into the out dir root in a post build step.

// next.config.js

module.exports = {
  exportPathMap() {
    return {
      "/404": { page: "/404" }
    }
  },
  trailingSlash: true
}

// package.json

{
  "scripts": {
    "build": "next build && next export",
    "postbuild": "node ./post-build.js"
  }
}

// post-build.js

const {
  writeFile,
  readFile,
} = require("fs").promises;
const { join } = require("path");

const main = async () => {
  const file = await readFile(join(__dirname, "out/404/index.html"));

  await writeFile(join(__dirname, "out/404.html"), file);
};

main();

[stahlmanDesign]

I have this same problem. I am deploying to Digital Ocean’s new App service like Vercel’s Now, and I need to set

module.exports = {
  trailingSlash: true
}

so that /music renders pages/music.js instead of having to navigate to /music.html

But setting that also alters my custom 404.js which does require 404.html

So fixing the routes breaks my custom 404 page, and vice-versa.

I tried to create folders for each page such as /music, /about and insert index.js, but it still treats the files the same way as if they were music.js, about.js inside /pages.