Author: M Abo Bakar Aslam

Creating Multiple Components

Before continuing this lesson, you can download the starting code using the provided resources. This will help you easily run and test all examples in this lesson.

Download Starting Code - HelloWorld

1. Example 1: Multiple Containers in a Single File

In this example, you will create seven different containers within a single file (app/page.tsx).

Each container represents a different section of a web application, such as:

Header
Navbar
Home Page
Registration
Login
Diary
Footer

All containers are created inside the main component (app/page). Each section contains a heading and a paragraph, and different background colors are used to visually distinguish them.

This approach is useful for understanding layout structure, but it is not recommended for large applications because everything is written in a single file.

// File: page.tsx located in app/ directory
 
export default function page() {
  return (
    <div style={{ backgroundColor: "black", color: "white", padding: "25px", display: "flex", flexDirection: "column", gap: "25px" }}>
 
      <h1>This is main componenet (app/page.tsx)</h1>
 
      {/* container 1: header */}
      <div style={{ backgroundColor: "blue", color: "white", padding: "5px" }}>
        <h1>Web Development Course</h1>
        <p>
          In this course, you will learn about React, Next, Nest, Express and
          mongoDB
        </p>
      </div>
 
      {/* container 2: Navbar */}
      <div style={{ backgroundColor: "green", color: "white", padding: "5px" }}>
        <h1>Nav Bar</h1>
        <p>This is navbar container</p>
      </div>
 
      {/* container 3: Home Page */}
      <div style={{ backgroundColor: "yellow", color: "red", padding: "5px" }}>
        <h1>Home page</h1>
        <p>This is home page container</p>
      </div>
 
      {/* container 4: Registration */}
      <div style={{ backgroundColor: "magenta", color: "white", padding: "5px" }}>
        <h1>Registration</h1>
        <p>This is Registration container</p>
      </div>
 
      {/* container 5: Login */}
      <div style={{ backgroundColor: "pink", color: "black", padding: "5px" }}>
        <h1>Login</h1>
        <p>This is Login container</p>
      </div>
 
      {/* container 6: Diary */}
      <div style={{ backgroundColor: "red", color: "white", padding: "5px" }}>
        <h1>Diary</h1>
        <p>This is Diary container</p>
      </div>
 
      {/* container 7: Footer */}
      <div style={{ backgroundColor: "cyan", color: "red", padding: "5px" }}>
        <h1>Footer</h1>
        <p>This is Footer container</p>
      </div>
 
    </div>
  );
}

2. Example 2: Creating Separate Components and Call in main Components (`app/page.tsx`)

In this example, the same layout is created, but instead of writing everything in one file, each section is moved into a separate component.

This is the recommended approach in NextJS because it improves:

Code readability
Reusability
Maintainability

Steps to Follow

Step 2.1. Creating Folder based on Website-Layout

Inside the app directory, create a folder named as (website) and create two new foldesr named as below. For more structuring, firstly stop application, create a folder named as src and move app into src folder.

components
(pages)

Your folder structure will be like as below

app-name/
└── src/
    └── app/
        ├── (website)/
        │   ├── (pages)/
        │   └── components/
        │
        ├── favicon.ico
        ├── globals.css
        ├── layout.tsx
        └── page.tsx

Step 2.2. Indentifying Components and Pages for the Website

In mostly, we considers

Components as

Header
Navbar
Footer

and Pages as

register
login
diary

Step 2.3. Creating Folder Structure and Files

Create folders structure and file (page.tsx) as given below

app-name/
│
└── src/
    │
    └── app/
        │
        ├── favicon.ico
        ├── globals.css
        ├── layout.tsx
        ├── page.tsx
        │
        └── (website)/
            │
            ├── components/
            │   │
            │   ├── Header/
            │   │   └── page.tsx
            │   │
            │   ├── Navbar/
            │   │   └── page.tsx
            │   │
            │   └── Footer/
            │       └── page.tsx
            │
            └── (pages)/
                │
                ├── register/
                │   └── page.tsx
                │
                ├── login/
                │   └── page.tsx
                │
                └── diary/
                    └── page.tsx

Important Note:

Folder names before page.tsx must start with a capital letter for components. While for pages, small letter is used.
For componenets, function name should be same as folder name, while for pages, it will be just page similar to name of file (page.tsx). Notice this in below codes

Step 2.4. for Components; Writing Code in `page.tsx`

Here are codes for each page.tsx

// File: Header/page.tsx located in app-name/src/app/(website)/componenets/Header/
 
export default function Header() {
    return (
        <div style={{ backgroundColor: "blue", color: "white", padding: "5px" }}>
            <h1>Web Development Course</h1>
            <p>
                In this course, you will learn about React, Next, Nest, Express and mongoDB
            </p>
        </div>
    )
}

// File: Navbar/page.tsx located in app-name/src/app/(website)/componenet/Navbar/
 
export default function Navbar() {
  return (
      <div style={{ backgroundColor: "green", color: "white", padding: "5px" }}>
        <h1>Nav Bar</h1>
        <p>This is navbar container</p>
      </div>
  )
}

// File: Footer/page.tsx located in app-name/src/app/(website)/componenet/Footer/
 
export default function Footer() {
  return (
      <div style={{ backgroundColor: "cyan", color: "red", padding: "5px" }}>
        <h1>Footer</h1>
        <p>This is Footer container</p>
      </div>
  )
}

Step 2.5. for Pages; Writing Code in `page.tsx`

Here are codes for each page.tsx

// File: login/page.tsx located in app-name/src/app/(website)/(pages)/login/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "pink", color: "white" }}>
        <h1>login</h1>
        <p>This is login container</p>
    </div>
  )
}

// File: register/page.tsx located in app-name/src/app/(website)/(pages)/register/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "magenta", color: "white" }}>
        <h1>Registration</h1>
        <p>This is Registration container</p>
    </div>
  )
}

// File:  diary/page.tsx located in app-name/src/app/(website)/(pages)/diary/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "red", color: "white" }}>
        <h1>diary</h1>
        <p>This is diary container</p>
    </div>
  )
}

Step 4: Import Components in app/page.jsx

Import all components into the main file (app/page.tsx)

// File: app/page.tsx located in app-name/src/app/
 
import Footer from "./(website)/components/Footer/page";
import Header from "./(website)/components/Header/page";
import Navbar from "./(website)/components/Navbar/page";
 
export default function page() {
  return (
    <div style={{ backgroundColor: "black", color: "white", padding: "25px", display: "flex", flexDirection: "column", gap: "25px" }}>
      
      <h1>This is main componenet (app/page.tsx)</h1>
 
      <Header />
      <Navbar />
      
      <div style={{ backgroundColor: "yellow", color: "red", padding: "5px" }}>
        <h1>Home page</h1>
        <p>This is home page container</p>
      </div>
 
      <Footer />
      
    </div>
  );
}

Note: Use src/app/layout.tsx file to call those componenet that are repeated called within all pages.