incorrect routing for dynamic api routes when Next.js and Node runtime are used in same repo

[williamli]

TLDR;

In a Next.js project with 2 dynamic API routes and 2 static API routes:

1. /api/attachment/[id].js ✅
2. /api/attachment/bye.js ✅
3. /page/api/download/[id].js ☠️
4. /page/api/download/hello.js ✅

All of the routes above works except for /api/download/something_other_than_hello. A 404 is returned instead.

Expected behaviour

https://vercel.com/support/articles/how-can-i-use-files-in-serverless-functions?query=includeFiles#next.js
The files inside api/* and pages/api/* are mapped to the /api/* subpath once deployed, with the api/* directory having precedence.

Workaround

A afterFiles rewrite has to be created in next.config.js to fix the broken route:

module.exports = {
  async rewrites() {
    return {
      afterFiles: [
        {
          source: '/api/download/:id',
          destination: '/api/download/[id]',
        },
      ]
    }
  },
}

Example Repo

https://github.com/vercel-support/63439-nextjs-mixed-apis/ deployed at https://63439-nextjs-mixed-apis.vercel-support.app/ (with the above next.config.js so everything works).

Something Interesting

In the deployment output, the route with problem is deployed without the file .js extension - /api/download/[id] while all other API routes end with .js.

[josharsh]

@williamli
May I pick this one this is still available?