Start with clear boundaries
A maintainable application is easier to understand when each part has one clear responsibility. Keep route handlers focused on HTTP concerns, place reusable UI in components, and isolate data access behind small server-side functions.
A structure that scales
- App routes: compose pages and define request boundaries.
- Components: render interfaces and receive typed props.
- Libraries: contain data access, integrations, and domain helpers.
- Types and schemas: describe the contracts shared across the application.
This separation reduces accidental coupling and makes testing, code review, and future refactoring much safer.
Prefer composition over giant components
Large pages are usually a sign that several responsibilities have been combined. Split sections into focused components and pass data explicitly. The result is not only cleaner code; it also makes loading states and responsive behavior easier to reason about.
Make the boundary explicit
Use server components for data retrieval whenever possible, and add client components only where interactivity is required. Keeping the client boundary small improves performance and prevents browser-only concerns from spreading through the project.