mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
17da2ca1fe
I was reading through the current https://nextjs.org/docs/app/api-reference/next-config-js/pageExtensions and noticed it started explaining different file formats for the `next.config.*` file. Is that information better suited for the https://nextjs.org/docs/app/api-reference/next-config-js index page? There was also a little redundancy at the top. Co-authored-by: Lee Robinson <[email protected]>
61 lines
2.1 KiB
Plaintext
61 lines
2.1 KiB
Plaintext
---
|
|
title: pageExtensions
|
|
description: Extend the default page extensions used by Next.js when resolving pages in the Pages Router.
|
|
---
|
|
|
|
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
|
|
|
|
<AppOnly>
|
|
|
|
By default, Next.js accepts files with the following extensions: `.tsx`, `.ts`, `.jsx`, `.js`. This can be modified to allow other extensions like markdown (`.md`, `.mdx`).
|
|
|
|
```js filename="next.config.js"
|
|
const withMDX = require('@next/mdx')()
|
|
|
|
/** @type {import('next').NextConfig} */
|
|
const nextConfig = {
|
|
pageExtensions: ['ts', 'tsx', 'mdx'],
|
|
experimental: {
|
|
mdxRs: true,
|
|
},
|
|
}
|
|
|
|
module.exports = withMDX(nextConfig)
|
|
```
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
You can extend the default Page extensions (`.tsx`, `.ts`, `.jsx`, `.js`) used by Next.js. Inside `next.config.js`, add the `pageExtensions` config:
|
|
|
|
```js filename="next.config.js"
|
|
module.exports = {
|
|
pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
|
|
}
|
|
```
|
|
|
|
Changing these values affects _all_ Next.js pages, including the following:
|
|
|
|
- [`middleware.js`](/docs/pages/building-your-application/routing/middleware)
|
|
- [`instrumentation.js`](/docs/pages/building-your-application/optimizing/instrumentation)
|
|
- `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 `middleware.page.ts`, `instrumentation.page.ts`, `_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:
|
|
|
|
```js filename="next.config.js"
|
|
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.
|
|
|
|
</PagesOnly>
|