pageExtensions

Core Idea

Extends or restricts which file extensions Next.js resolves as pages in the Pages Router, e.g. to support MDX pages or to colocate test files safely.

Key Concepts

• pageExtensions: array of extensions (without leading dot pattern like .tsx) that Next.js treats as page files. Default: .tsx, .ts, .jsx, .js.
• Affects all special files: not just pages/*, but also proxy.js, instrumentation.js, pages/_document.js, pages/_app.js, pages/api/.

Code Examples

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

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

• O que demonstra: primeiro exemplo adiciona suporte a MDX; segundo redefine para exigir sufixo .page. em todo arquivo de página, permitindo colocalizar testes/componentes soltos dentro de pages/ sem serem tratados como rotas.

Anti-patterns

• Reconfigurar extensões sem renomear todos os arquivos especiais: mudar .ts para .page.ts exige renomear proxy.page.ts, instrumentation.page.ts, _app.page.ts etc, ou eles param de ser reconhecidos.

Key Takeaways

1. Mudar pageExtensions é global, afeta toda a árvore de páginas e arquivos especiais, não só as rotas normais.
2. Usar um sufixo tipo .page. é o padrão para colocalizar arquivos não-rota dentro de pages/.

Connects To

• MDX guide: motivação típica para adicionar mdx/md aqui.