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 pagesdirectory when resolving pages.

Open next.config.jsand add the pageExtensionsconfig:

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

Note: The default value of pageExtensionsis ['tsx', 'ts', 'jsx', 'js'] .

Note: configuring pageExtensionsalso affects _document.js, _app.js, _middleware.jsas well as files under pages/api/. For example, setting pageExtensions: ['page.tsx', 'page.ts']means the following files: _document.tsx, _app.tsx, _middleware.ts, pages/users.tsxand pages/api/users.tswill have to be renamed to _document.page.tsx, _app.page.tsx, _middleware.page.ts, pages/users.page.tsxand pages/api/users.page.tsrespectively.

Including non-page files in the pages directory

To colocate test files, generated files, or other files used by components in the pagesdirectory, you can prefix the extensions with something like page.

Open next.config.jsand add the pageExtensionsconfig:

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

Then rename your pages to have a file extension that includes .page(ex. rename MyPage.tsxto MyPage.page.tsx).

Note: Make sure you also rename _document.js, _app.js, _middleware.js, as well as files under pages/api/.

Without this config, Next.js assumes every tsx/ts/jsx/js file in the pagesdirectory is a page or API route, and may expose unintended routes vulnerable to denial of service attacks, or throw an error like the following when building the production bundle:

Build error occurred
Error: Build optimization failed: found pages without a React Component as default export in
pages/MyPage.generated
pages/MyPage.test

See https://nextjs.org/docs/messages/page-without-valid-component for more info.

Related

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