custom-page-extensions.md

description
Extend the default page extensions used by Next.js when resolving pages in the pages directory.

Custom Page Extensions

You can extend the default Page extensions (.tsx, .ts, .jsx, .js) used by Next.js. Inside next.config.js, add the pageExtensions config:

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

Changing these values affects all Next.js pages, including the following:

• middleware.js
• pages/_document.js
• pages/_app.js
• pages/api/

For example, if you reconfigure .ts page extensions to .page.ts, you would need to rename pages like _app.page.ts.

Including non-page files in the pages directory

You can colocate test files or other files used by components in the pages directory. Inside next.config.js, add the pageExtensions config:

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

Then, rename your pages to have a file extension that includes .page (e.g. rename MyPage.tsx to MyPage.page.tsx). Ensure you rename all Next.js pages, including the files mentioned above.

Related

Introduction to next.config.js: Learn more about the configuration file used by Next.js.