Modular components in React and Next.js

Start with ownership

A component should own a clear piece of the interface. That might be a section, a card, a form field, a toolbar, or a repeated content pattern. If the boundary is hard to name, the component is probably doing too much or too little.

Good component structure makes the project easier to scan. You should be able to open a page file and see the major product sections without reading every detail at once.

Route components and leaf components

In Next.js, route-level components usually coordinate data, layout, metadata, and section order. Leaf components should stay focused on rendering a smaller piece of UI from props.

This separation keeps pages understandable while still making the smaller components reusable in previews, lists, modals, and detail screens.

export default async function BlogPage() {
  const articles = await getArticles();

  return (
    <main>
      <BlogHero featured={articles[0]} />
      <ArticleList articles={articles.slice(1)} />
    </main>
  );
}

Prefer composition over switchboard props

A component with too many boolean props becomes difficult to reason about. isLarge, isFeatured, hasMedia, reversed, compact, highlighted, and muted can turn one component into five hidden components.

Composition is often cleaner. A card can expose a small structure, while the parent decides what content belongs in the title, media, metadata, and action areas.

Keep styling local to the component role

CSS Modules work well when the class names describe the component's structure: wrapper, header, media, copy, action. The global design tokens should handle scale, color, spacing, and motion values.

This keeps components reusable and styles consistent.

Extract when duplication becomes meaningful

Not every repeated div deserves a component. Extract when a pattern has a name, a repeated behavior, or a shared contract. Premature abstraction can make simple pages harder to edit.

A good extraction makes both sides easier to read: the parent becomes clearer, and the child has an obvious job.