Composition Pattern in Next.js: What It Is and How to Use It

The composition pattern in Next.js means building components by combining smaller, reusable pieces instead of using inheritance. It helps create flexible and maintainable UI by nesting or passing components as children or props.

How It Works

Think of the composition pattern like building with LEGO blocks. Instead of making one big block with everything inside, you create small blocks that fit together to form a bigger structure. In Next.js, which uses React, this means you create small components that do one thing well, then combine them to build complex UIs.

For example, you might have a Button component and a Card component. Instead of making a special card with a button inside by inheritance, you compose the card by placing the button inside it as a child. This makes your code easier to understand and reuse.

Composition uses React’s ability to pass components as children or props, letting you nest components inside each other. This approach is more flexible than inheritance because you can mix and match pieces freely.

Example

This example shows a simple Card component that uses composition by accepting any content as children. We then use it to wrap a Button component inside the card.

javascript

import React from 'react';

function Button({ onClick, children }) {
  return <button onClick={onClick} style={{ padding: '0.5rem 1rem', backgroundColor: '#0070f3', color: 'white', border: 'none', borderRadius: '4px' }}>{children}</button>;
}

function Card({ children }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '1rem', borderRadius: '8px', maxWidth: '300px' }}>
      {children}
    </div>
  );
}

export default function App() {
  return (
    <Card>
      <h2>Welcome to Next.js</h2>
      <Button onClick={() => alert('Clicked!')}>Click Me</Button>
    </Card>
  );
}

Output

A card with a heading 'Welcome to Next.js' and a blue button labeled 'Click Me'. Clicking the button shows an alert 'Clicked!'.

When to Use

Use the composition pattern in Next.js whenever you want to build flexible and reusable UI components. It is especially helpful when components need to be combined in different ways or when you want to pass custom content inside a component.

For example, use composition for layout components like Modal, Card, or List that can contain various children. It also works well for buttons, forms, and navigation elements where you want to customize parts without rewriting the whole component.

This pattern keeps your code clean, easier to maintain, and lets you build complex interfaces by assembling simple parts, just like building with blocks.

Key Points

• Composition means building components by combining smaller components.
• It uses React’s children or props to nest components.
• It is more flexible and reusable than inheritance.
• Ideal for UI parts that need customization or reuse.
• Helps keep Next.js apps clean and maintainable.

Key Takeaways

Composition in Next.js builds UI by combining small components using children or props.

It creates flexible, reusable, and maintainable components without inheritance.

Use it for layouts, buttons, modals, and any component needing custom content.

Composition helps keep your code simple and easy to update.

React’s component nesting makes composition natural and powerful in Next.js.