diff --git a/docs/advanced-features/middleware.md b/docs/advanced-features/middleware.md index 7812da86b3aaf..24955cfa19365 100644 --- a/docs/advanced-features/middleware.md +++ b/docs/advanced-features/middleware.md @@ -50,8 +50,6 @@ export const config = { } ``` -> **Note** the `pageExtensions` config affects middleware as well, [see related documentation here](/docs/api-reference/next.config.js/custom-page-extensions.md). - ## Matching Paths Middleware will be invoked for **every route in your project**. The following is the execution order: diff --git a/docs/api-reference/next.config.js/custom-page-extensions.md b/docs/api-reference/next.config.js/custom-page-extensions.md index 75949781f9ad5..8d191afb010bd 100644 --- a/docs/api-reference/next.config.js/custom-page-extensions.md +++ b/docs/api-reference/next.config.js/custom-page-extensions.md @@ -4,9 +4,7 @@ description: Extend the default page extensions used by Next.js when resolving p # Custom Page Extensions -Aimed at modules like [@next/mdx](https://github.com/vercel/next.js/tree/canary/packages/next-mdx), which adds support for pages ending with `.mdx`. You can configure the extensions looked for in the `pages` directory when resolving pages. - -Open `next.config.js` and add the `pageExtensions` config: +You can extend the default Page extensions (`.tsx`, `.ts`, `.jsx`, `.js`) used by Next.js. Inside `next.config.js`, add the `pageExtensions` config: ```js module.exports = { @@ -14,15 +12,18 @@ module.exports = { } ``` -> **Note**: The default value of `pageExtensions` is [`['tsx', 'ts', 'jsx', 'js']`](https://github.com/vercel/next.js/blob/f1dbc9260d48c7995f6c52f8fbcc65f08e627992/packages/next/server/config-shared.ts#L161). +Changing these values affects _all_ Next.js pages, including the following: -> **Note**: configuring `pageExtensions` also affects `_document.js`, `_app.js`, `middleware.js` as 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.tsx` and `pages/api/users.ts` will have to be renamed to `_document.page.tsx`, `_app.page.tsx`, `middleware.page.ts`, `pages/users.page.tsx` and `pages/api/users.page.ts` respectively. +- `middleware.js` +- `pages/_document.js` +- `pages/_app.js` +- `pages/api/` -## Including non-page files in the `pages` directory +For example, if you reconfigure `.ts` page extensions to `.page.ts`, you would need to rename pages like `_app.page.ts`. -To colocate test files, generated files, or other files used by components in the `pages` directory, you can prefix the extensions with something like `page`. +## Including non-page files in the `pages` directory -Open `next.config.js` and add the `pageExtensions` config: +You can colocate test files or other files used by components in the `pages` directory. Inside `next.config.js`, add the `pageExtensions` config: ```js module.exports = { @@ -30,20 +31,7 @@ module.exports = { } ``` -Then rename your pages to have a file extension that includes `.page` (ex. rename `MyPage.tsx` to `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 `pages` directory 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. -``` +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