[GH-ISSUE #251] Support pageExtensions config for .mdx page routes #62

New issue

Closed

opened 2026-05-06 12:36:55 +02:00 by BreizhHardware · 2 comments

BreizhHardware commented

2026-05-06 12:36:55 +02:00

Owner

Originally created by @southpolesteve on GitHub (Mar 4, 2026).
Original GitHub issue: https://github.com/cloudflare/vinext/issues/251

Problem

The App Router route scanner hardcodes the file extensions it looks for when discovering page routes:

**/page.{tsx,ts,jsx,js}

This means .mdx files used directly as page routes (e.g., app/blog/page.mdx) are not recognized. The route scanner skips them and the route returns 404.

Next.js supports a pageExtensions config option in next.config.js that lets users add custom extensions like mdx:

// next.config.js
const withMDX = require("@next/mdx")();
module.exports = withMDX({
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
});

Current behavior

MDX imports work: a page.tsx that does import Content from "./content.mdx" renders correctly (vinext auto-injects @mdx-js/rollup and the proxy plugin handles transform ordering).
MDX page routes do not work: app/about/page.mdx returns 404 because the route scanner never finds it.

Expected behavior

When pageExtensions includes "mdx" (or vinext auto-detects MDX files), the route scanner should glob for **/page.{tsx,ts,jsx,js,mdx} and register .mdx files as valid page routes.

Files that need changes

packages/vinext/src/routing/app-router.ts (line 127): extend the glob pattern
packages/vinext/src/routing/pages-router.ts: same for Pages Router file scanning
packages/vinext/src/config/next-config.ts: read pageExtensions from next.config.js
Both route scanners also have hardcoded extension lists for layouts, errors, loading, etc. that would need the same treatment

References

Next.js docs: https://nextjs.org/docs/pages/api-reference/config/next-config-js/pageExtensions
Discovered while adding E2E tests for PR #160 (MDX plugin ordering fix)

Originally created by @southpolesteve on GitHub (Mar 4, 2026). Original GitHub issue: https://github.com/cloudflare/vinext/issues/251 ## Problem The App Router route scanner hardcodes the file extensions it looks for when discovering page routes: ``` **/page.{tsx,ts,jsx,js} ``` This means `.mdx` files used directly as page routes (e.g., `app/blog/page.mdx`) are not recognized. The route scanner skips them and the route returns 404. Next.js supports a `pageExtensions` config option in `next.config.js` that lets users add custom extensions like `mdx`: ```js // next.config.js const withMDX = require("@next/mdx")(); module.exports = withMDX({ pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"], }); ``` ## Current behavior - MDX **imports** work: a `page.tsx` that does `import Content from "./content.mdx"` renders correctly (vinext auto-injects `@mdx-js/rollup` and the proxy plugin handles transform ordering). - MDX **page routes** do not work: `app/about/page.mdx` returns 404 because the route scanner never finds it. ## Expected behavior When `pageExtensions` includes `"mdx"` (or vinext auto-detects MDX files), the route scanner should glob for `**/page.{tsx,ts,jsx,js,mdx}` and register `.mdx` files as valid page routes. ## Files that need changes - `packages/vinext/src/routing/app-router.ts` (line 127): extend the glob pattern - `packages/vinext/src/routing/pages-router.ts`: same for Pages Router file scanning - `packages/vinext/src/config/next-config.ts`: read `pageExtensions` from next.config.js - Both route scanners also have hardcoded extension lists for layouts, errors, loading, etc. that would need the same treatment ## References - Next.js docs: https://nextjs.org/docs/pages/api-reference/config/next-config-js/pageExtensions - Discovered while adding E2E tests for PR #160 (MDX plugin ordering fix)