What are the problems of adding non-page file inside next.js pages dir?

I read in many places that we should only add page files inside next.js pages folder, but no one say exactly what are the problems of adding non-page files inside the pages folder?

let say for example that I'm adding custom hooks and test files inside the pages directory. what could go wrong? are there security issues with this?

(I know that this maybe not good for files/folder structures, but I want to know if there are other issues like security or something else).

Solution

Next.js reads the file structure in the pages directory, and uses every file name that it finds as a route. That is by design, i.e. Next.js is just designed around this principle, which they call "file-system based routing".

So it's not that you "should not", but you "can not" add non-page files inside the pages folder. Every file in the pages folder just is a "page", by design. Only it would throw an error if it's not in the correct format (e.g. if it doesn't export a react component as a default export).

So, if you add a file inside the pages directory which you do not want to be a "page" (or "route"), Next.js would try to add a route for that file name anyway, and one of the following would happen:

either, if possible, that file would just become a "page", even if you didn't want that,
or, if not possible, Next.js would throw an error, complaining that it can't use that file as a "page"

Also note that in Next.js v13 there are new concepts which allow to add non-page files under the "pages" folder, if in the correct place an format, but I'm not yet familiar with that. I think it is the so called "app directory". But that seems to be in "alpha" stage, and not production-ready yet.