Custom Page Extensions

Aimed at modules like @next/mdx, which adds support for pages ending with .mdx. You can configure the extensions looked for in the pages directory when resolving pages.

Open next.config.js and add the pageExtensions config:

module.exports = {
  pageExtensions: ['mdx', 'jsx', 'js', 'ts', 'tsx'],
}

Note: configuring pageExtensions also affects _document.js, _app.js as well as files under pages/api/. For example, setting pageExtensions: ['page.tsx', 'page.ts'] means the following files: _document.tsx, _app.tsx, pages/users.tsx and pages/api/users.ts will have to be renamed to _document.page.tsx, _app.page.tsx, pages/users.page.tsx and pages/api/users.page.ts respectively.

Related