archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/docs/api-reference/next.config.js/custom-page-extensions.md
Javi Velasco f354f46b3f
Deprecate nested Middleware in favor of root middleware (#36772) 
This PR deprecates declaring a middleware under `pages` in favour of the project root naming it after `middleware` instead of `_middleware`. This is in the context of having a simpler execution model for middleware and also ships some refactor work. There is a ton of a code to be simplified after this deprecation but I think it is best to do it progressively.

With this PR, when in development, we will **fail** whenever we find a nested middleware but we do **not** include it in the compiler so if the project is using it, it will no longer work. For production we will **fail** too so it will not be possible to build and deploy a deprecated middleware. The error points to a page that should also be reviewed as part of **documentation**.

Aside from the deprecation, this migrates all middleware tests to work with a single middleware. It also splits tests into multiple folders to make them easier to isolate and work with. Finally it ships some small code refactor and simplifications.
2022-05-19 15:46:21 +00:00

2.5 KiB
Raw Blame History

description
Extend the default page extensions used by Next.js when resolving pages in the pages directory.

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

Open next.config.js and add the pageExtensions config:

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

Note

: The default value of pageExtensions is ['tsx', 'ts', 'jsx', 'js'].

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.

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:

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

: 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.

Related