App router doesn't work when using pageExtensions config for Pages router

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.4.7-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/laughing-booth-7z2m98?file=%2Fnext.config.js%3A1%2C1

To Reproduce

• Create a new Next.js application
• Enable the pageExtensions option in next.config.js to add a custom extension, as in the pages router docs. Any extension can be used, e.g. custom.tsx
• Add any page to your pages directory, using the configured extension to verify the router is working. E.g. pages/mypage.custom.tsx
• Add the app directory and create a new page, e.g. app/myotherpage/page.tsx
  • Verify the app pages are not working 🐛

Going further:

• Try renaming the new page in the app directory to use the custom extension
  • E.g. rename app/myotherpage/page.tsx to app/myotherpage/page.custom.tsx
• Verify that, instead of a 404 page, the error pageExtensions.map is not a function is triggered

Describe the Bug

Pages in the app directory are not recognised if the pageExtensions config is being used. Trying to access them render a 404 error page.

Attempting to rename the app page to use the same custom extension set for the pages router in the pageExtensions config (e.g. app/myotherpage/page.custom.tsx) results in the error pageExtensions.map is not a function.

Disabling the pageExtensions config and renaming the pages router pages to remove the custom extensions is a workaround that allows both routers to coexist as expected. In a real legacy app that would probably require the entire pages directory to be refactored

Expected Behavior

The app router pages should be able to coexist with the pageExtensions option enabled to allow a smoother gradual migration (as recommended by the docs) of legacy apps that still heavily rely on custom pages extensions.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Start with the linked CodeSandbox and its next.config.js, then reproduce the failure using a custom pageExtensions value with both pages and app directories. Trace how the configured extensions are handled for each router. Done means pages using the custom extension and app/page.tsx routes coexist without 404 responses or the pageExtensions.map error.