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