Rewrites doesn't work with routes of custom page extension

[huozhi]

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

12.20.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev, codesandbox

Describe the Bug

When rewrite path matches custom page extension, visiting path with page extension results in 404.

Example

// next.config.js
module.exports = {
  pageExtensions: ["page.js", "js"],
  async rewrites() {
    return [
      {
        source: "/:slug*.page",
        destination: "/:slug*"
      }
    ];
  }
};

- pages/
  |- about.page.js

This issue only occurs in development mode. Production mode (next build) works well

Observed behavior

• Visit /about result the content of about.page.js
• Visit /about.page result 404

Expected Behavior

• Visit /about should result the content of about.page.js
• Visit /about.page should result the content of about.page.js as well

To Reproduce

https://codesandbox.io/s/nextjs-page-ext-k5xp6

[huozhi]

After digging, I found in the rewrite are been executed in this case while running next dev.

// router.ts
const allRoutes = [
      ...this.headers,
      ...this.redirects,
      ...this.fsRoutes,
      page checker,
      ...this.rewrites
]

Each time I visit /about.page which should be rewritten to /about, it will go through router.execute for all routes, but end at the page checker. The rewrites I've configured at next.config.js will be skipped.

[huozhi]

This issue is resolved by #23407 with usage of rewrites.beforeFiles

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.