src/components

The src/components directory is where you define globally reusable components for your Corract application. These components can be used across different pages and layouts and other components, allowing you to maintain a consistent design and functionality throughout your application. By organizing your components in this directory, you can easily manage and import them wherever needed, enhancing the modularity and maintainability of your codebase.

Of course you can create components that are unique to individual pages or layouts colocated with them. For layout colocated components, place them anywhere, you manually define the layouts in the app-def.ts file. So there's no conflict there. And for page colocated components, you can place them anywhere you want as well, remember as described on the src/pages page, the default export from the index.tsx file is the component that will render for that given page. ex: src/pages/some-route/index.tsx will render for the /some-route route. Any other file in that directory will never be rendered as a route.

The best convention for keeping colocated components organized is to create a _components directory within the page or layout directory. For example, if you have a page at src/pages/some-route/index.tsx, you can create a src/pages/some-route/_components directory and place your components there. This way, you can keep your page-specific components organized and easily accessible.