From c9fb6635d49218fcb6599d105e784f1045207aad Mon Sep 17 00:00:00 2001 From: Scotty Waggoner Date: Wed, 3 Mar 2021 14:00:46 -0800 Subject: [PATCH 1/5] Add docs for using pageExtensions to colocate other files with page components --- .../next.config.js/custom-page-extensions.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) 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 f457b9083d1772e..06ca5b6ab50be74 100644 --- a/docs/api-reference/next.config.js/custom-page-extensions.md +++ b/docs/api-reference/next.config.js/custom-page-extensions.md @@ -14,8 +14,37 @@ module.exports = { } ``` +> **Note**: The default value of `pageExtensions` is [`['tsx', 'ts', 'jsx', 'js']`](https://github.com/vercel/next.js/blob/04f37d0978e5fc9939012c1d771ef4e6535e7787/packages/next/next-server/server/config-shared.ts#L43). + > **Note**: configuring `pageExtensions` also affects `_document.js`, `_app.js` as well as files under `pages/api/`. For example, setting `pageExtensions: ['page.tsx', 'page.ts']` means the following files: `_document.tsx`, `_app.tsx`, `pages/users.tsx` and `pages/api/users.ts` will have to be renamed to `_document.page.tsx`, `_app.page.tsx`, `pages/users.page.tsx` and `pages/api/users.page.ts` respectively. +## Including non-page files in the `pages` directory + +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`. + +Open `next.config.js` and add the `pageExtensions` 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` (ex. rename `MyPage.tsx` to `MyPage.page.tsx`). + +> **Note**: As mentioned in the note above, make sure you also rename `_document.js`, `_app.js` as well as files under `pages/api/`. + +Without this config, when building the production bundle, Next.js will throw an error like this if there are non component files in the `pages` directory: + +``` +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://err.sh/vercel/next.js/page-without-valid-component for more info. +``` + ## Related
From 68b28af247a87f148fd88b422406f9e38b434da5 Mon Sep 17 00:00:00 2001 From: Scotty Waggoner Date: Mon, 9 Aug 2021 21:55:24 -0700 Subject: [PATCH 2/5] Update docs/api-reference/next.config.js/custom-page-extensions.md Co-authored-by: Matthew Francis Brunetti --- docs/api-reference/next.config.js/custom-page-extensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 06ca5b6ab50be74..f46b4975c872793 100644 --- a/docs/api-reference/next.config.js/custom-page-extensions.md +++ b/docs/api-reference/next.config.js/custom-page-extensions.md @@ -34,7 +34,7 @@ Then rename your pages to have a file extension that includes `.page` (ex. renam > **Note**: As mentioned in the note above, make sure you also rename `_document.js`, `_app.js` as well as files under `pages/api/`. -Without this config, when building the production bundle, Next.js will throw an error like this if there are non component files in the `pages` directory: +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 From c98426af63f4382cd413a7309dd008cdff4254b8 Mon Sep 17 00:00:00 2001 From: Scotty Waggoner Date: Fri, 27 Aug 2021 14:16:58 -0700 Subject: [PATCH 3/5] Update docs/api-reference/next.config.js/custom-page-extensions.md Co-authored-by: Steven --- docs/api-reference/next.config.js/custom-page-extensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 aab0b992ea51ab8..507d66711bdabf7 100644 --- a/docs/api-reference/next.config.js/custom-page-extensions.md +++ b/docs/api-reference/next.config.js/custom-page-extensions.md @@ -14,7 +14,7 @@ module.exports = { } ``` -> **Note**: The default value of `pageExtensions` is [`['tsx', 'ts', 'jsx', 'js']`](https://github.com/vercel/next.js/blob/04f37d0978e5fc9939012c1d771ef4e6535e7787/packages/next/next-server/server/config-shared.ts#L43). +> **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). > **Note**: configuring `pageExtensions` also affects `_document.js`, `_app.js` as well as files under `pages/api/`. For example, setting `pageExtensions: ['page.tsx', 'page.ts']` means the following files: `_document.tsx`, `_app.tsx`, `pages/users.tsx` and `pages/api/users.ts` will have to be renamed to `_document.page.tsx`, `_app.page.tsx`, `pages/users.page.tsx` and `pages/api/users.page.ts` respectively. From 6f6ed9f9f5b225a9d40df0a9a39a0c3842b8580c Mon Sep 17 00:00:00 2001 From: Scotty Waggoner Date: Fri, 27 Aug 2021 14:17:04 -0700 Subject: [PATCH 4/5] Update docs/api-reference/next.config.js/custom-page-extensions.md Co-authored-by: Steven --- docs/api-reference/next.config.js/custom-page-extensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 507d66711bdabf7..5b9782f556cc982 100644 --- a/docs/api-reference/next.config.js/custom-page-extensions.md +++ b/docs/api-reference/next.config.js/custom-page-extensions.md @@ -32,7 +32,7 @@ module.exports = { Then rename your pages to have a file extension that includes `.page` (ex. rename `MyPage.tsx` to `MyPage.page.tsx`). -> **Note**: As mentioned in the note above, make sure you also rename `_document.js`, `_app.js` as well as files under `pages/api/`. +> **Note**: Make sure you also rename `_document.js`, `_app.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: From b5724bffdd681931583fea0d07ac099987a6463f Mon Sep 17 00:00:00 2001 From: Scotty Waggoner Date: Fri, 27 Aug 2021 14:17:34 -0700 Subject: [PATCH 5/5] Update docs/api-reference/next.config.js/custom-page-extensions.md Co-authored-by: Steven --- docs/api-reference/next.config.js/custom-page-extensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5b9782f556cc982..dc11fdc6fac1ca3 100644 --- a/docs/api-reference/next.config.js/custom-page-extensions.md +++ b/docs/api-reference/next.config.js/custom-page-extensions.md @@ -42,7 +42,7 @@ Error: Build optimization failed: found pages without a React Component as defau pages/MyPage.generated pages/MyPage.test -See https://err.sh/vercel/next.js/page-without-valid-component for more info. +See https://nextjs.org/docs/messages/page-without-valid-component for more info. ``` ## Related