I like a modular architecture and I’d love to have something like:

/pages
--/somepage
----/index.tsx
----/_components
------/ComponentA.tsx
------/ComponentB.tsx

Rather than having a folder outside of /pages where I keep all of the components for /somepage organized.

However, I understand the /pages folder is treated differently. Are there any performance implications or reasons why I should not do this?

>Solution :

Every file in pages/ is treated as a real route in your application. For example, in your example, someone could visit mysite.com/somepage/_components/ComponentA as a real page.

If you want this behavior, go for it. If you don’t, put your components outside of the folder.

As for performance implications, Next.js will compile/build your components files as pages, too, which will probably slow down the build process needlessly.

So please don’t do this:

/pages
--/somepage
----/index.tsx
----/_components
------/ComponentA.tsx
------/ComponentB.tsx

and do this:

/components
--/somepage
----/ComponentA.tsx
----/ComponentB.tsx
/pages
--/somepage
----/index.tsx