avoid page creation inside the pages folder

Question

Is there a way to avoid route creation for a .js\jsx\tsx file inside of the /pages folder?

I want to keep the file there, but I don't want nextJS to create the routing.

The purpose is that it makes more sense to keep all the components that are indeed a page under the pages' folder. But I don't always want them to be routes I can navigate to.

I tried to remove the default export, but then next crashes when I try to navigate to that route (Error: The default export is not a React Component in page: "...")

Answer 1

One way to achieve this is by using the Custom Page Extensions configuration in NextJs.

You can colocate test files or other files used by components in the pages directory. Inside next.config.js, add the pageExtensions config:

Edit the pageExtensions array in next.config.js with following to only allow files with *.page.(tsx|ts|jsx|js) to be loaded as pages:

const nextConfig = {
  ...
  pageExtensions: [page.tsx', 'page.ts', 'page.jsx', 'page.js],
}

module.exports = nextConfig

Then rename page files with the .page. extension.