I also do this. But the example is pretty small. When you start getting to 500 line files with a lot of useState and useEffect type logic I find it helpful to break it down into a folder. Not the components folder, just the folder where this code was before.
I usually write components up to 150 lines of code until I make sure everything is working fine and then start breaking them into smaller components only if I need to use some part somewher else or if they need to get larger than that
I've been doing it that way and I concluded with this rule, if the component is going to be used in multiple places it makes sense to put it in its own separate file, if it's only used in one parent component or it accompanies an exported parent component at all times I keep them is the same file. Except when you're using Next and a component needs to be flagged as a "client component", then you're forced to extract its logic to its own file.
I do search components using vscode shortcuts. For example I do just Cmd + P then write component name. And bum here it is. But in your way, we have to use global search. Also css may messy. I may try in small projects but, in real world projects hell no
I actually don't mind splitting for client components, because it's basically going into "another world". Your client component gets prerendered, but then _also_ adds a script tag to run React in the browser.
@@leerobthe "other world" is technically true, but not necessarily a natural composition mental model, which presumably React and Next are driven by. I don't mind putting a client component in a new file, but every time I do, I wish there was no such hassle.
Is the source code already public for this ?? This approach is quite common in enterprise application and complex codebases but i would say proprr folder structure is better than having everything in one file like this.
Do I have to export all compound components explicitly? I mean should I default export Breadcrumb then export function BreadcrumbList(){}, export function BreadcrumbItem(){} and so on. With this way I can use Client Compound components inside Server components but I have question. Why I can't use them like export default Breadcrumb, and then no exports just Breadcrumb.BreadcrumbList = function (){}, Breadcrumb.BreadcrumbItem = function () {} if I do it in this way it gives React Client Manifest error but why?
Lemme join the chorus of "oof, really can't see this as a good idea" - esp. with Tailwind, you've got a ton of code to parse if you want to refactor anything or especially work with someone(s) else on the same project. I think this implies you do a lot of solo work perhaps?
I personally dont enjoy reading through large files. I get lost quick.
I also do this. But the example is pretty small. When you start getting to 500 line files with a lot of useState and useEffect type logic I find it helpful to break it down into a folder. Not the components folder, just the folder where this code was before.
I usually write components up to 150 lines of code until I make sure everything is working fine and then start breaking them into smaller components only if I need to use some part somewher else or if they need to get larger than that
this can be solved using proper folder structure
I've been doing it that way and I concluded with this rule, if the component is going to be used in multiple places it makes sense to put it in its own separate file, if it's only used in one parent component or it accompanies an exported parent component at all times I keep them is the same file. Except when you're using Next and a component needs to be flagged as a "client component", then you're forced to extract its logic to its own file.
I do search components using vscode shortcuts. For example I do just Cmd + P then write component name. And bum here it is. But in your way, we have to use global search. Also css may messy. I may try in small projects but, in real world projects hell no
If it's just you fine. If you're working with others, you need to clean it up fr
I would do that, but these components are usually client components, so i would have to create a new file anyway
I actually don't mind splitting for client components, because it's basically going into "another world". Your client component gets prerendered, but then _also_ adds a script tag to run React in the browser.
@@leerobthe "other world" is technically true, but not necessarily a natural composition mental model, which presumably React and Next are driven by. I don't mind putting a client component in a new file, but every time I do, I wish there was no such hassle.
I hate vertical scroll though so probably not for me
What's this VSCode Theme? Looks clean & minimal.
Is the source code already public for this ??
This approach is quite common in enterprise application and complex codebases but i would say proprr folder structure is better than having everything in one file like this.
github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template
Naaah bro you are drunk for sure
Do I have to export all compound components explicitly? I mean should I default export Breadcrumb then export function BreadcrumbList(){}, export function BreadcrumbItem(){} and so on. With this way I can use Client Compound components inside Server components but I have question. Why I can't use them like export default Breadcrumb, and then no exports just Breadcrumb.BreadcrumbList = function (){}, Breadcrumb.BreadcrumbItem = function () {} if I do it in this way it gives React Client Manifest error but why?
Lemme join the chorus of "oof, really can't see this as a good idea" - esp. with Tailwind, you've got a ton of code to parse if you want to refactor anything or especially work with someone(s) else on the same project. I think this implies you do a lot of solo work perhaps?