Composition vs inheritance in NextJS - Hands-On Comparison

Composition vs Inheritance in Next.js Components

📖 Scenario: You are building a simple Next.js app that shows user profiles. You want to understand how to reuse UI parts by using composition instead of inheritance.

🎯 Goal: Create two components: a ProfileCard that shows user info, and a UserList that uses ProfileCard to display multiple users. This will demonstrate composition in Next.js.

📋 What You'll Learn

Create a list of user objects with name and email

Create a configuration variable for the title of the user list

Use composition by creating a ProfileCard component that receives user data as props

Create a UserList component that renders multiple ProfileCard components

Use functional components and hooks as needed

Follow Next.js 14+ App Router conventions with React 19+

💡 Why This Matters

🌍 Real World

Building user profile lists or any repeated UI elements in modern web apps using React and Next.js.

💼 Career

Understanding composition is key for React developers to write clean, reusable components and avoid complex inheritance hierarchies.

1

Create the user data array

Create a constant array called users with these exact objects: { id: 1, name: 'Alice', email: '[e-mail]' }, { id: 2, name: 'Bob', email: '[e-mail]' }, and { id: 3, name: 'Charlie', email: '[e-mail]' }.

NextJS

// Create the users array with the specified objects
// Your code here

Need a hint?

Use const users = [ ... ] with objects inside the array.

2

Add a title configuration variable

Create a constant string called listTitle and set it to 'User Profiles'.

NextJS

const users = [
  { id: 1, name: 'Alice', email: '[e-mail]' },
  { id: 2, name: 'Bob', email: '[e-mail]' },
  { id: 3, name: 'Charlie', email: '[e-mail]' }
];

// Create a constant listTitle with value 'User Profiles'
// Your code here

Need a hint?

Use const listTitle = 'User Profiles'; to create the title variable.

3

Create the ProfileCard component

Create a React functional component called ProfileCard that takes a user prop. It should return a <section> with a <h2> showing user.name and a <p> showing user.email.

NextJS

const users = [
  { id: 1, name: 'Alice', email: '[e-mail]' },
  { id: 2, name: 'Bob', email: '[e-mail]' },
  { id: 3, name: 'Charlie', email: '[e-mail]' }
];

const listTitle = 'User Profiles';

// Create ProfileCard component here
// Your code here

Need a hint?

Use function ProfileCard({ user }) { return ( ... ) } and JSX tags inside.

4

Create the UserList component using ProfileCard

Create a React functional component called UserList. It should return a <main> containing an <h1> with listTitle and map over users to render a <ProfileCard> for each user. Use user.id as the key.

NextJS

const users = [
  { id: 1, name: 'Alice', email: '[e-mail]' },
  { id: 2, name: 'Bob', email: '[e-mail]' },
  { id: 3, name: 'Charlie', email: '[e-mail]' }
];

const listTitle = 'User Profiles';

function ProfileCard({ user }) {
  return (
    
      {user.name}
      {user.email}
    
  );
}

// Create UserList component here
// Your code here

Need a hint?

Use users.map(user => <ProfileCard key={user.id} user={user} />) inside the UserList component.