Composition vs inheritance in NextJS

Introduction

Composition and inheritance are two ways to build components by reusing code. Composition means putting smaller parts together. Inheritance means creating a new component based on an existing one.

When you want to build a UI by combining simple components like buttons and cards.

When you want to share common behavior but keep components flexible.

When you want to avoid complex component hierarchies that are hard to maintain.

When you want to customize parts of a component without changing its core.

When you want clearer and easier-to-understand code by using small building blocks.

Syntax

NextJS

/* Composition example */
function Button({ children }) {
  return <button>{children}</button>;
}

function Dialog() {
  return (
    <div>
      <h2>Title</h2>
      <Button>Click me</Button>
    </div>
  );
}

/* Inheritance example (not common in React/Next.js) */
import React from 'react';
class BaseButton extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}

class SpecialButton extends BaseButton {
  render() {
    return <button style={{ color: 'red' }}>{this.props.label}</button>;
  }
}

In Next.js and React, composition is preferred over inheritance.

Composition uses props and children to combine components.

Examples

This shows composition by using the WelcomeMessage component inside Page.

NextJS

function WelcomeMessage({ name }) {
  return <p>Welcome, {name}!</p>;
}

function Page() {
  return (
    <div>
      <WelcomeMessage name="Alice" />
    </div>
  );
}

This shows inheritance by extending Button to create DangerButton with red background.

NextJS

import React from 'react';
class Button extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}

class DangerButton extends Button {
  render() {
    return <button style={{ backgroundColor: 'red' }}>{this.props.label}</button>;
  }
}

Sample Program

This example shows composition by building UserInfo from Avatar and user data. It also shows inheritance by creating RedButton from Button. In Next.js, composition is the recommended way.

NextJS

import React from 'react';

// Composition: Small reusable components
function Avatar({ user }) {
  return <img src={user.avatarUrl} alt={`${user.name} avatar`} style={{ width: '50px', borderRadius: '50%' }} />;
}

function UserInfo({ user }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
      <Avatar user={user} />
      <div>{user.name}</div>
    </div>
  );
}

// Inheritance example (rare in React, shown for comparison)
class Button extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}

class RedButton extends Button {
  render() {
    return <button style={{ color: 'white', backgroundColor: 'red' }}>{this.props.label}</button>;
  }
}

export default function App() {
  const user = { name: 'Jane Doe', avatarUrl: 'https://via.placeholder.com/50' };

  return (
    <div style={{ padding: '1rem', fontFamily: 'Arial, sans-serif' }}>
      <h1>User Profile</h1>
      <UserInfo user={user} />
      <div style={{ marginTop: '1rem' }}>
        <Button label="Normal Button" />
        <RedButton label="Red Button" />
      </div>
    </div>
  );
}

Important Notes

React and Next.js favor composition because it keeps components simple and flexible.

Inheritance can make code harder to follow and is rarely used in React.

Use composition to build UI like Lego blocks, combining small pieces into bigger ones.

Summary

Composition means building components by combining smaller parts.

Inheritance means creating new components by extending existing ones.

In Next.js, prefer composition for clearer and easier code.