hope everyone is well.
I have a quick question regarding best practice with Next.JS. As the title suggests the question is related to the way in which a next project is structured.
To get the point:
In Next.JS we have the pages folder which is responsible for rendering actual site pages within your NextJS app. For example, pages/about.tsx would render a page at https://yoursite.com/about great, that works fine.
However, a source of pain for me has been the fact that these files can end up becoming pretty big and messy as they are essentially assembly components which combine multiple components to make the page while adding route specific data to each component.
I decided to take the path of having a views folder which sits adjacent to the pages folder and has components which assemble various sections of the each page.
For example, the file pages/about.tsx would also have a folder in views (views/About) which houses various assembled sections of the page AboutIntroSection.tsx, AboutContactSection.tsx etc.
This method allows my actual route handlers to look much neater however I feel this could be a bit of a pain in the long run and could be considered to be bad practice.
Before I head down this tunnel full steam I wanted to get some opinions on this topic, namely I wanted to know peoples’ thoughts on:
- Using the method described above
- Just assembling the pages in their respective route folder
- Making a sort of BasePage component which takes a pageType prop and conditionally renders depending on that
I feel like the answer will be just go with 2 but, yeah, thought I would ask.
Thank you all.