4f793fd7fa
Reverts vercel/next.js#40016. `pageExtensions` is not frequently used – as is mostly a workaround until the Layouts RFC lands. Thus, it doesn't make sense to place a note on the Middleware page and expect readers to need to connect the dots and understand `pageExtensions`. Further, the example docs linked could be more specific about Middleware to prevent this confusion. I will also make that change here. Co-authored-by: Balázs Orbán <info@balazsorban.com>
1.4 KiB
1.4 KiB
| 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.jspages/_document.jspages/_app.jspages/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.